vue点击实现多选

思路：新增一个新的空数组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);
            }
        }
    }
})