欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中选中多个选项,并且改变选中的样式

程序员文章站 2022-04-30 10:35:23
...

vue中选中多个选项,并且改变选中的样式
1:HTML:

 <ul class="content">
              <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id">
                <div>{{item.name}}</div>
                <div>{{item.sex}}</div>
              </li>
 </ul>

2:data 中定义

 rSelect:[],
 touristList:[
              {
                name:"张三",
                sex:"男",
                id:0
              },
              {
                name:"李四",
                sex:"男",
                id:1
              },
              {
                name:"小龙女",
                sex:"女",
                id:2
              },
              {
                name:"周芷若",
                sex:"女",
                id:3
              },
              {
                name:"夕月",
                sex:"女",
                id:4
              },

            ],

3:methods中

 onStorage(value,e){
          console.log(this.rSelect.indexOf(value));
          if (this.rSelect.indexOf(value) !== -1) {
            this.rSelect.splice(this.rSelect.indexOf(value), 1); //取消
          } else {
            this.rSelect.push(value);//选中添加到数组里
          }
          console.log(this.rSelect);
        },
相关标签: vue