0%

绑定class样式

绑定class样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 <div id="demo">
<!-- 绑定class样式--字符串写法,适用于样式类名不确定。需要动态确定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定,名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div>
<!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定,名字也确定,但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div>

</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.config.productionTip = false
Vue.createApp({
data(){
return{
name:'Ann',
mood:'normal',
classArr:['c1','c2','c3'],
classObj:{
'c1':false,
'c2':false,
}

}
},
methods:{
changeMood(){
const arr=['happy','sad','normal']
this.mood=arr[Math.floor(Math.random()*3)]
}
}

}).mount('#demo')
</script>

绑定style样式

1 :style=”{fontSize: xxx}”,其中xxx是动态值