class动态样式
<h1 :class="classN">蒹葭苍苍</h1>
<button @click="changePink">变粉</button>
<button @click="changeYellow">变黄</button>
<script>
new Vue({
el:'#app',
data:{
classN:'red lime',
},
methods:{
changePink(){
this.classN = 'pink lime';
},
changeYellow(){
this.classN = 'yellow lime';
}
}
})
</script>
- 方式二: 动态样式绑定 :class=“三元运算符”
<h2 :class="isShow ? 'yellow lime' : 'pink lime'">白露为霜</h2>
<ul>
<li v-for="(item,index) in stars" :class="index%2===0 ? 'yellow lime' : 'pink lime'">{{item}}</li>
</ul>
<script>
new Vue({
el:'#app',
data:{
classN:'red lime',
isShow:false,
stars:['科比','詹姆斯','杜兰特','乔丹','张振','姚明','麦迪']
},
methods:{
changePink(){
this.classN = 'pink lime';
},
changeYellow(){
this.classN = 'yellow lime';
}
}
})
</script>
- 方式三: 动态样式绑定 :class="{key:true,key1:false}"
<div :class="{red:true,pink:false,lime:true}">所谓伊人,在水一方</div>
<ul>
<li v-for="(item,index) in stars" :class="{yellow:index%3===0,pink:index%3===1,red:index%3===2,lime:true}">{{item}}</li>
</ul>
<script>
new Vue({
el:'#app',
data:{
classN:'red lime',
isShow:false,
stars:['科比','詹姆斯','杜兰特','乔丹','张振','姚明','麦迪']
},
methods:{
changePink(){
this.classN = 'pink lime';
},
changeYellow(){
this.classN = 'yellow lime';
}
}
})
</script>