Vue点击动态添加Class
2020-03-12 本文已影响0人
Cherry丶小丸子
1
<div id="app">
<ul>
<li v-for="(item, index) in todos" v-on:click="addClass(index)" v-bind:class="{ activeClass : index==current}">{{ item.name}}</li>
</ul>
</div>
addClass:function(index){
this.current=index;
}
2
<el-button size="mini" @click="clickBadge(1)" :class="{activeBadge : 1 == activeBadge }">查看全部</el-button>
<el-button size="mini" @click="clickBadge(2)" :class="{activeBadge : 2 == activeBadge }">任务</el-button>
<el-button size="mini" @click="clickBadge(3)" :class="{activeBadge : 3 == activeBadge }">需求</el-button>
<el-button size="mini" @click="clickBadge(4)" :class="{activeBadge : 4 == activeBadge }">缺陷</el-button>
clickBadge(num){
this.activeBadge = num
}