脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue选中改变样式

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

您可能感兴趣的文章:

相关文章

  • 基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

    基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

    uv3-table：一款基于uniapp+vue3跨端自定义手机端增强版表格组件,支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示,支持编译兼容H5+小程序端+App端,H5+小程序+App端,多端运行一致
    2024-05-05
  • TypeError:res.forEach is not a function报错解决办法

    TypeError:res.forEach is not a function报错解决办法

    这篇文章主要给大家介绍了关于TypeError:res.forEach is not a function报错的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Vue项目如何引入bootstrap、elementUI、echarts

    Vue项目如何引入bootstrap、elementUI、echarts

    这篇文章主要介绍了Vue项目如何引入bootstrap、elementUI、echarts,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • vue中响应式布局如何将字体大小改成自适应

    vue中响应式布局如何将字体大小改成自适应

    这篇文章主要介绍了vue中响应式布局如何将字体大小改成自适应，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue实现手机号、验证码登录（60s禁用倒计时）

    Vue实现手机号、验证码登录（60s禁用倒计时）

    这篇文章主要介绍了Vue实现手机号、验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-12-12
  • 解决vue的touchStart事件及click事件冲突问题

    解决vue的touchStart事件及click事件冲突问题

    这篇文章主要介绍了解决vue的touchStart事件及click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue+canvas实现视频截图功能

    Vue+canvas实现视频截图功能

    这篇文章主要为大家详细介绍了Vue+canvas实现视频截图功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 使用el-form-item设置标签长度

    使用el-form-item设置标签长度

    这篇文章主要介绍了使用el-form-item设置标签长度方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue实现div高度可拖拽

    vue实现div高度可拖拽

    这篇文章主要为大家详细介绍了vue实现div高度可拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • ElementUI中el-form组件的rules参数举例详解

    ElementUI中el-form组件的rules参数举例详解

    Form组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将Form-Item的prop属性设置为需校验的字段名即可,下面这篇文章主要给大家介绍了关于ElementUI中el-form组件的rules参数的相关资料,需要的朋友可以参考下
    2023-10-10

最新评论