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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
js获取 type=radio 值的方法
May 09 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
简单理解vue中Props属性
Oct 27 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
vue-cli 如何打包上线的方法示例
May 08 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python实现按行切分文本文件的方法
2016/04/18 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
使用tensorflow实现AlexNet
2017/11/20 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
北京SQL新华信咨询
2016/09/30 面试题
办公室主任职责范本
2014/03/07 职场文书
会计自荐信范文
2014/03/09 职场文书
忠诚教育心得体会
2014/09/03 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2015年监理工作总结范文
2015/04/07 职场文书