Vue中如何实现多选并动态改变选中项的样式示例？

本文共计295个文字，预计阅读时间需要2分钟。

1: HTML: 使用 `ul` 元素，并为其添加 `class=content`。在 `li` 元素中使用 `v-for` 指令遍历 `touristList` 数组，并为每个项目绑定 `@click` 事件处理函数 `onStorage`。同时，根据 `rSelect` 数组中的索引判断是否为活动状态，并设置 `key` 为 `item.id`。在 `li` 元素内部，使用 `div` 包裹 `item.name` 和 `item.sex`。

2: Data 中定义 `rSelect` 为空数组，以及变量 `t`。

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中选中多个选项并且改变选中的样式的实例代码的文章就介绍到这了,更多相关vue选中改变样式内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！