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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
Node.js安装配置图文教程
May 10 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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生成静态页的实现方法
2013/05/10 PHP
PHP中常用的转义函数
2014/02/28 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
PDO::_construct讲解
2019/01/27 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
浅析python中while循环和for循环
2019/11/19 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
物流专业求职计划书
2014/01/10 职场文书
教研活动总结
2014/04/28 职场文书
现场活动策划方案
2014/08/22 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript