vue 切换 class （切换类） toggleClass 单选多选

最新推荐文章于 2024-07-01 17:56:59 发布

周金鱼啊

最新推荐文章于 2024-07-01 17:56:59 发布

阅读量1.6k

点赞数 2

原文链接：https://blog.csdn.net/qiqi_77_/article/details/79354457?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-3-79354457.nonecase

版权

注：以下三个例子，均以切换active为例

一、切换

toggleClass

<div class="btn" :class="{'active':isChoose}" @click="togglePay"></div>

data(){
    return {
        isChoose : false
    }
},
methods:{
    togglePay:function(){
        this.isChoose = !this.isChoose
    }
}

效果如下图：

二、单选

div class="btn" :class="{'active':isChoose==index}" @click="isChoose=index"></div>

data(){
    return {
        isChoose : null
    }
},

效果如下图：

三、多选

<template>
    <ul>
        <li v-for="(item,index) in cartList" 
            :class="{'active':item.active}" 
            @click="togglePay(item,index)">

        </li>
    </ul>
</template>

<script >
    export default{

        methods:{

            togglePay(item,index){

                if(item.active){

                    //为item添加不存在的属性，需要使用vue提供的        
                    //Vue.set( object, key, value )方法。
                    this.$set(item,'active',false);
   
                }else{

                    this.$set(item,'active',true);

                }
             }}

        }
}

</script>