首页 > 建站教程 > 前端框架 >  VUE Vue.set通过对添加的属性判断,实现选择多个(多选)正文

VUE Vue.set通过对添加的属性判断,实现选择多个(多选)

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

vue.set()

    所有选项的值如下:
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 )方法。