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 相关文章推荐
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
JS使用for in有序获取对象数据
May 19 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
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
使用python实现knn算法
2017/12/20 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
学python爬虫能做什么
2020/07/29 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
彩色的翅膀教学反思
2014/04/25 职场文书
电视节目策划方案
2014/05/16 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
四大名著读书笔记
2015/06/25 职场文书
厉行节约工作总结
2015/08/12 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js