美文网首页
Vue点击动态添加Class

Vue点击动态添加Class

作者: Cherry丶小丸子 | 来源:发表于2020-03-12 17:39 被阅读0次

    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
    }
    

    相关文章

      网友评论

          本文标题:Vue点击动态添加Class

          本文链接:https://www.haomeiwen.com/subject/waqvjhtx.html