绑定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是动态值