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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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多个文件上传到服务器实例
2014/10/29 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
使用Python函数进行模块化的实现
2019/11/15 Python
使用python求解二次规划的问题
2020/02/29 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
暑假实习求职信范文
2013/09/22 职场文书
化学教师教学反思
2014/01/17 职场文书
期末自我鉴定
2014/01/23 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
党员评议思想汇报
2014/10/08 职场文书
基石观后感
2015/06/12 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书