1.样式切换
单个切换样式
/*html部分*/
<div class="bg" v-bind:class="{active:isActive}"></div>
<button v-on:click="toggle">切换</button>
/*样式部分*/
.bg{
width:300px;
height:200px;
background: #f6f6f6;
}
.bg.active{
background:#ddd;
}
/*vue部分*/
export default {
components:{todoItem},
data () {
return {
isActive:true
}
},
methods:{
toggle(){
this.isActive=!this.isActive;
}
}
}
列表切换样式
/*html部分*/
<ul>
<li v-for="(item,index) in menu" :class="{on:flag==index}" @click="light(index)">{{item.name}}</li>
</ul>
/*样式部分*/
.on{
color:red;
}
/*vue部分*/
export default {
data () {
return {
menu:[
{'name':'语文'},
{'name':'数学'},
{'name':'自然'},
{'name':'社会'},
{'name':'和谐'}
],
flag:0
}
},
methods:{
light(index){
this.flag=index;
}
}
}
效果图
