vue中选中多个选项并且改变选中的样式的实例代码
更新时间：2020年09月16日 10:18:38 作者：爬坑的小白
这篇文章主要介绍了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选中改变样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue-cli4 配置 element-ui 按需引入操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本篇文章主要介绍了详解.vue文件中监听input输入事件（oninput），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Vue学习-VueRouter路由基础,路由本质上就是超链接,xiamian 文章围绕VueRouter路由的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习有所帮助2021-12-12
Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题
这篇文章主要介绍了Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本篇文章主要介绍了vue语法之拼接字符串的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
vue中element-ui表格缩略图悬浮放大功能的实例代码
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？下面小编通过实例代码给大家介绍vue中element-ui表格缩略图悬浮放大功能，一起看看吧2018-06-06
这篇文章主要介绍了Vue 2.0入门基础知识之内部指令知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了webstorm添加*.vue文件支持，webstorm很多的插件内置，不用安装插件，下面尝试用vue和es6做项目，有兴趣的可以了解一下2018-05-05
这篇文章主要介绍了vue动态子组件的两种实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue子组件监听父组件值的变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论