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 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
js倒计时小程序
Nov 05 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
Angular实现form自动布局
Jan 28 Javascript
javascript的理解及经典案例分析
May 20 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
JS实现4位随机验证码
Oct 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
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
详解webpack2+React 实例demo
2017/09/11 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
在Python中使用SQLite的简单教程
2015/04/29 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
留学自荐信写作方法
2014/01/27 职场文书
企业法人授权委托书
2014/04/03 职场文书
创先争优活动承诺书
2014/08/30 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
python实现双链表
2022/05/25 Python