<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式绑定</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy {
background-color: bisque;
}
.sad {
background-color: blue;
}
.normal {
background-color: orange;
}
.test1 {
background-color: blueviolet;
}
.test2 {
border-color: brown;
border-width: medium;
}
.test3 {
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
</body>
<div id="root">
<div class="basic" :class="style" @click="changeStyle">{{name}}</div>
<div class="basic" :class="classArr">{{name}}</div>
<div class="basic" :class="classObj">{{name}}</div>
<div class="basic" :style="styleObj">{{name}}</div>
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
name: '测试',
style: "normal",
classArr: ["test1", "test2", "test3"],
classObj: {
test1: true,
test2: true
},
styleObj: {
fontSize: '40px'
},
styleObj2: {
color: 'red'
},
styleArr: [{
fontSize: '40px'
},
{
color: 'red'
}
]
},
methods: {
changeStyle() {
// this.style = "happy"
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
this.style = arr[index]
}
}
})
</script>
</html>