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 相关文章推荐
php中给js数组赋值方法
Mar 10 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
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代码DOS造成用光网络带宽
2011/03/01 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
php操作mongoDB实例分析
2014/12/29 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
九种原生js动画效果
2015/11/11 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python3调用R的示例代码
2018/02/23 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
使用Python构造hive insert语句说明
2020/06/06 Python
python属于解释型语言么
2020/06/15 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
建议书的格式
2014/05/12 职场文书
企业职业病防治方案
2014/05/29 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2014年材料员工作总结
2014/11/19 职场文书
介绍信样本
2015/01/31 职场文书