vue中v-for循环选中点击的元素并对该元素添加样式操作


Posted in Javascript onJuly 17, 2020

相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变;但是往往所有v-for循环出的元素都会变化。如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化

html:

<div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'>
 <span>{{item.name}}</span>
</div>

css:

.addclass{
 color : red;
}

js:

data:{
 items :[
  {
  name :'apple',
  price: '5$'
  },
  {
  name:'banana',
  price:"3$"
  },
  {
  name:'pear',
  price:'4$'
  }
 ],
 isactive : false
}

onclick(){
 this.isactive = true
}

解决方法:使用index索引,当点击一个元素时,将该元素的index索引赋给类样式的启用变量,如果该变量和index相等时,则启用该类样式

html:

<div v-for = "(item,index) in items" :class = "isactive == index ? 'addclass' : '' " @click='onclick(index)'>
 <span>{{item.name}}</span>
</div>

css:

.addclass{
 color : red;
}

js:

data:{
 items :[
  {
  name :'apple',
  price: '5$'
  },
  {
  name:'banana',
  price:"3$"
  },
  {
  name:'pear',
  price:'4$'
  }
 ],
 isactive : -1
}
onclick(index){

 //将点击的元素的索引赋值给bian变量
 this.isactive = index
}

补充知识:v-for 遍历数组点击动态绑定样式

这可能是一个对于任何js开发者来说都非常简单的问题,或者根本谈不上被叫做“问题”,“基操”而已。但是,很遗憾,我为此开了个篇幅简略记录下它,因为这是我处于前端开发基础阶段数次阻滞过我的问题,以下暂提供一种解决方案,后续可能补充。

这类问题多见于单页面应用(SPA)中的侧边栏、表格列等,当我曾拿到这个需求时,我以为我能用Vue中介绍的Class动态绑定来解决,事实上的确如此,但我用错了,请看我错误的解决方法:

HTML

<template>
<!-- 点击某个绑定样式 -->
 <ul>
  <li v-for="(data, index) in formData" :key="data.id" :class="{active: isActive}" @click="currentInfo(data, index)">name: {{data.name}},age: {{data.age}}
  </li>
 </ul>

</template>

JavaScript

<script>
export default {
  name: 'classActive'
  data() {
    return {
      isActive: false,  // 用来判断active样式类是否显示
      formData: [{
        id: 1,
        name: 'zhangsan',
        age: 20
      },{
        id: 2,
        name: 'lisi',
        age: 21
      },{
        id: 3,
        name: 'wangwu',
        age: 22
      }
    }
  }
  methods: {
    currentInfo(data, index) {
      if(data.id-1 === index) { // 当前选择的列表项与列表id号相等则绑定active
       this.isActive = true;
      }
    }
  }
}
</script>

Style

<style scoped>
  li {
    list-style: none;
    border: 1px solid #333;
  }
  .active {
    background: light-gray;
  }
</style>

好,于是我兴冲冲地切回页面看效果,结果:

vue中v-for循环选中点击的元素并对该元素添加样式操作

当我点击其中的一行时,结果所有的li都绑上了active样式,稍微想一下,相信大家都能找到问题所在,所有li的样式都由一个isActive控制,当我点击一行,全局变量isActive变为ture,当然所有的li都会绑上啦!然后我就停滞下来,思索一番,想过在data数组各项里插入一个标识用来单独控制,但被我否决了,一来对象中插入属性麻烦,二来污染数据源。于是,便有了下面我要说的解决方法:

HTML

<template>
<!-- 点击某个绑定样式 -->
 <ul>
  <li v-for="(data, index) in formData" :key="data.id" :class="currentClass(index)" @click="currentInfo(index)">name: {{data.name}},age: {{data.age}}
  </li>
 </ul>

</template>

JavaScript

<script>
export default {
  name: 'classActive'
  data() {
    return {
      currentNumber: 0,  // 用来判断active样式类是否显示
      formData: [{
        id: 1,
        name: 'zhangsan',
        age: 20
      },{
        id: 2,
        name: 'lisi',
        age: 21
      },{
        id: 3,
        name: 'wangwu',
        age: 22
      }
    }
  }
  methods: {
    currentInfo(index) {
      this.currentNumber = index;
    },
    currentClass(index) {
      return [this.currentNumber == index ? 'active' : ''];
    }
  }
}
</script>

Style

<style scoped>
  li {
    list-style: none;
    border: 1px solid #333;
  }
  .active {
    background: light-gray;
  }
</style>

这里,我新建一个变量空间存储当前点击的列表序号index,这样不管怎样点击,这个currentNumber永远是唯一的,那么和它相等的数组项也是唯一的,相等即可绑定active样式了,看效果:

vue中v-for循环选中点击的元素并对该元素添加样式操作

好,以上就解决了遍历数组点击动态绑定样式,以后我找到更好的,我会补充,也非常欢迎大家在评论里给出更好的建议。

以上这篇vue中v-for循环选中点击的元素并对该元素添加样式操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 #Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 #Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 #Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 #Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 #Javascript
简单了解常用的JavaScript 库
Jul 16 #Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
You might like
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
python接入支付宝的实例操作
2020/07/20 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
护士专业推荐信
2013/11/02 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
大学生学期个人总结
2015/02/12 职场文书
金榜题名主持词
2015/07/02 职场文书
记者节感言
2015/08/03 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Python List remove()实例用法详解
2021/08/02 Python
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫