VUE Vue.set通过对添加的属性判断，实现选择多个（多选）

今天我爱模板网要用VUE做一个多选的效果，即对所有选项，可以选择也可以取消，可以多选也可以一个不选，效果图如下：


    所有选项的值如下：

list:[
    {id:1,title:'JSK'},
    {id:2,title:'OP'},
    {id:3,title:'SK'},
    {id:4,title:'衬衫'},
    {id:5,title:'鞋子'},
    {id:6,title:'包包'},
    {id:7,title:'小物'}
]

思路：
    在点击选项的时候，可以对list进行操作，将它添加一个checked属性，值为false或者true，进而添加或删除选中的class，html如下：

<div class="hxz-multiple-select">
    <div>
        <a v-for="(item,index) in list" :key="index" :class="{'checked':item.checked}" tapmode @click="clickMultiplePopItem(item,index)">{{item.title}}</a>
    </div>
    <a class="confirm" @click="onSelectMultiplePop()">确定</a>
</div>

    重点在：:class="{'checked':item.checked}"，点击的时候将每条item传过去，对它进行操作，js代码如下：

//多选单个点击
clickMultiplePopItem(item,index){
    if(item.checked){
        Vue.set(item,'checked',false);
    }else{
        Vue.set(item,'checked',true);
    }
}

    这里要说明：为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！