<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<style>
.class1 {
width: 100px;
height: 100px;
border: 5px solid pink;
}
.class2 {
width: 100px;
height: 100px;
background-color: red;
}
.class3 {
width: 100px;
height: 100px;
background-color: blue;
}
.class4 {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 1.绑定class样式---字符串写法，适用于：样式的类目不确定，需要动态指定 -->
<!-- <div id="root" class="class1" :class="class2" @click='changeMood'></div> -->
<!-- 2.绑定class样式---数组写法，适用于：class类名个数和名字都不确定 -->
<!-- <div id="root" class="class1" :class='arr' style="margin-top: 20px;"></div> -->
<!-- 3.绑定class样式---对象写法，适用于class类名个数确定，名字确定，但是动态确定用不用 -->
<!-- <div id="root" class="class1" :class='obj' style="margin-top: 20px;"></div> -->
<!-- 4.绑定class样式---style写法 -->
<div id="root" class="class1" :style='style' style="margin-top: 20px;">变色</div>
<script>
Vue.config.productionTip = false
new Vue({
el : '#root',
data:{
name:'big',
class2:'class2',
arr:['class2','class3','class4'],
obj:{
class3:true,
class4:true
},
style:{
fontSize : '50px',
color:'red',
}
},
methods:{
//1.需求1：随机点击
changeMood(){
var arr = ['class2','class3','class4']
var index =Math.floor(Math.random()*3)
this.class2 = arr[index]
},
},
})
</script>
</body>
</html>
