Skip to main content
 首页 » 编程设计

vue点击实现多选

2022年07月15日141grandyang

思路:新增一个新的空数组arr(arr的里元素的索引值表示,表示该索引值对应的li已经处于被选中状态),如果arr数组没有点击的索引值,就添加到arr数组里,如果有就把这个索引,就把这个索引从数组中删除。

<ul class="box"> 
<li v-for="c,index of cities" :class="{checked:arr.includes(index)}" @click="checkedBox(index)">{{c}}</li> 
</ul>
var app = new Vue({ 
    el : ".box", 
    data : { 
        cities : ["上海","北京","广州","重庆","西安"], 
        arr : [] 
    }, 
    methods :{ 
        checkedBox(i){ 
            if(this.arr.includes(i)){ 
                //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效 
                //filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组 
                this.arr=this.arr.filter(function (ele){return ele != i;}); 
            }else{ 
                this.arr.push(i); 
            } 
        } 
    } 
})

本文参考链接:https://www.cnblogs.com/wulicute-TS/p/13931442.html