vue中选中多个选项并且改变选中的样式的实例代码


Posted in Javascript onSeptember 16, 2020

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选中改变样式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 #Javascript
Vue项目打包编译优化方案
Sep 16 #Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 #Javascript
如何在JS文件中获取Vue组件
Sep 16 #Javascript
javascript自定义加载loading效果
Sep 15 #Javascript
图解JS原型和原型链实现原理
Sep 15 #Javascript
vue实现简单全选和反选功能
Sep 15 #Javascript
You might like
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php文件包含的几种方式总结
2019/09/19 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python实现图片识别加翻译功能
2019/12/26 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
党风廉政承诺书
2014/03/27 职场文书
文明倡议书范文
2014/04/15 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
党员评议个人总结
2014/10/20 职场文书
店面出租协议书范本
2014/11/28 职场文书
2014年稽查工作总结
2014/12/20 职场文书
看雷锋电影观后感
2015/06/10 职场文书
初中同学会致辞
2015/08/01 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
2016教师国培研修感言
2015/12/08 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
解决Oracle数据库用户密码过期
2022/05/11 Oracle