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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
解决layer图标icon不加载的问题
Sep 04 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密码生成类实例
2014/09/24 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
python新手学习可变和不可变对象
2020/06/11 Python
大学生个人简历自我评价
2013/11/16 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
爱护公共设施的标语
2014/06/24 职场文书
安全检查汇报材料
2014/12/26 职场文书
小学教师求职信范文
2015/03/20 职场文书
亮剑精神观后感
2015/06/05 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
win sever 2022如何占用操作主机角色
2022/06/25 Servers