vue手写多选（获取选中的值+动态绑定class名）

想要飞翔的pig

已于 2023-02-09 17:18:37 修改

阅读量1.3k

点赞数 3

分类专栏： vue 动态class 文章标签： vue elementui html

于 2022-03-07 14:46:41 首次发布

本文链接：https://blog.csdn.net/weixin_53587375/article/details/123330015

版权

vue 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

动态class

1 篇文章 0 订阅

订阅专栏

话不多说，先看效果

在这里插入图片描述

1.上代码

   <div class="check-left" >
                <div class="check-package" 
                	:class="checkbox.includes(item.text)? 'active_four' : ''"
                	 @click="changeAlgorithm(item,index)" 
                	 v-for="(item,index) in iconList" :key="index">
                    <p>
                        <meg-icon class="check-icon" :name="item.icon"></meg-icon>
                        <b class="check-text">{{item.text}}</b>
                    </p>
                </div>
        </div>
        //  js
        data() {
	    return {
	        checkbox:[],
	        iconList:[
	            {
	                icon:"face-person",
	                text:"脸人"
	            },
	            {
	                icon:"face-person",
	                text:"结构化"
	            },
	            {
	                icon:"face-person",
	                text:"入侵"
	            },
	            {
	                icon:"face-person",
	                text:"越界"
	            },
	            {
	                icon:"face-person",
	                text:"人员徘徊"
	            },
	            {
	                icon:"face-person",
	                text:"翻墙"
	            },
	            {
	                icon:"face-person",
	                text:"车辆禁停"
	            },
	            {
	                icon:"face-person",
	                text:"摔倒"
	            },
	            {
	                icon:"face-person",
	                text:"打电话"
	            },
	            {
	                icon:"face-person",
	                text:"看手机"
	            },
	            {
	                icon:"face-person",
	                text:"人员奔跑"
	            },
	            {
	                icon:"face-person",
	                text:"睡岗检测"
	            },
	            {
	                icon:"face-person",
	                text:"值岗超员"
	            },
	            {
	                icon:"face-person",
	                text:"值岗少员"
	            },
	            {
	                icon:"face-person",
	                text:"人员聚众"
	            },
	            {
	                icon:"face-person",
	                text:"人员扭打"
	            },
	            {
	                icon:"face-person",
	                text:"离开"
	            },
	            {
	                icon:"face-person",
	                text:"抽烟"
	            },
	            {
	                icon:"face-person",
	                text:"离岗检测"
	            },
	
	        ],
        }
         methods: {
		    // 选择算法
		    changeAlgorithm(item,){
		       console.log(item,"选择算法",this.checkbox);
		       var idx = this.checkbox.indexOf(item.text);
		       console.log(idx)
		      //如果已经选中了，那就取消选中，如果没有，则选中
		      if(idx!=-1){
		        this.checkbox.splice(idx,1);
		      }else{
		        this.checkbox.push(item.text);
		      }
		    },
    }
    // css
     .active_four{
        background: red;
    }