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

相关推荐

springboot+vue实现文件上传下载

html中创建并调用vue组件的几种方法汇总

vue项目中js-cookie的使用存储token操作

解决vuex刷新数据消失问题