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

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

html:

{{item.name}}

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:

{{item.name}}

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

  • name: {{data.name}},age: {{data.age}}

JavaScript

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;

}

}

}

}

Style

li {

list-style: none;

border: 1px solid #333;

}

.active {

background: light-gray;

}

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

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

HTML

  • name: {{data.name}},age: {{data.age}}

JavaScript

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' : ''];

}

}

}

Style

li {

list-style: none;

border: 1px solid #333;

}

.active {

background: light-gray;

}

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

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

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

时间: 2020-07-14

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/550471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【IDEA】IDEA中使用git将项目上传到码云上

前言 该篇文章记录了使用IDEA上传项目到码云上。 前提是你在 IDEA中集成了git ,并且会 git的简单使用 。 一、IDEA上传项目到码云上 1.将项目变成Git能管理的仓库 选中菜单栏 VCS ➡ Import into Version Control ➡ Create GIt Repository…选中当前项目目录&…

activiti 多部门审批_Activiti 基本介绍

简介这两天工作中要用到Activiti,就简单学习了下,做一个记录,好脑子不如烂笔头,记下来牢靠些,来吧,话不多说,一个字:干。Activiti是什么,为什么要用它Activiti项目是一项…

拼接大屏数据展示_可视化大屏的UI设计是根据哪几个方面来进行?

随着大数据产业的发展,越来越多的公司开始意识到数据资源的管理和运用,特别是一些中、大型企业,在日常中会经常用到可视化大屏,这个时候就需要UI设计师能呈现出相应的视觉效果。下面,就给大家介绍一下可视化大屏的UI设…

00600 ora 关闭oracle_Oracle集群高可用故障切换

原文链接[WK-T]ORACLE 10G 配置故障转移(Failover)​blog.itpub.net文章参考:《大话 Oracle RAC 集群 高可用性 备份与恢复》 张晓明 编著Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一…

如何关闭window10自动更新

如何关闭Windows10的自动更新? 相信很多同学在用Windows10系统的时候,经常跳出更新系统的提示。 有时自动更新的时间,恰好是我们需要急用电脑的时候,而且系统更新比较慢,等待的时间长。 甚至经常会更新失败&#xf…

python字典返回键值对列表_返回列表Python dict dictionaries Python 数据结构——字典 返回列表...

最近研究返回列表,稍微总结一下,以后继续补充:字典是比列表更先进的一种内置数据结构。“字典”就像现实中的字典一样,每一个单词对应好几个意思。在Python面里就是每一个键对应一个关联值。在Python中,我们可以很便利…

分割文本_PSENet、PANNet、DBNet三个文本检测算法异同

点击蓝字关注我们这三个文本检测算法都是segment base算法,通过由下而上的方式,先对text进行segment,然后再根据segment text,计算出text的instancePSENet近年来,自然场景文本检测在场景理解、产品识别、自动驾驶和目标…

maven安装过程以及手动添加jar包到本地仓库

Maven安装过程及手动添加JAR包到本地仓库详解 https://blog.csdn.net/niityzu/article/details/50997544 分类: Maven(1) 版权声明:本文为博主原创文章,未经博主允许不得转载。 一、Maven介绍 Maven是一个项目构建…

怎么把文件放到docker容器里

1、查找所有容器id:docker ps -a 2、查找容器长ID:docker inspect -f {{.ID}} tomcat-container-id 3、拷贝本地文件到容器: 命令:docker cp 本地路径 容器长ID:容器路径 例子:docker cp /home/work/FDFS/1.jpg dfba3…

lisp医院化验系统_医院智能导视系统

众所周知,“看病难”已经成为了全民关注的社会问题,这一问题也不是一朝一夕能解决的。我司研发的医院智能导视系统,避免就医过程中不必要的时间浪费,大大有效的提高就医效率。医院智能导视系统为了有序推进医院信息化工作&#xf…

的环境下 qt 运行在_Ubuntu16.04环境下运行vins mono(环境配置及编译)之ROS kinetic的安装...

所需环境:ubuntu16.04ROS kineticopencv 3.3.1eigen3.3.3ceres solver 1.141.ROS Kinetic 的安装(1)设置sources.listsudo sh -c echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.l…

java对MP4视频编码转换为H264格式解决浏览器播放无画面问题

最近遇到一个mp4视屏在浏览器页面播放无画面问题,经过多次研究发现视屏编码在浏览器格式不支持,因此需要对视屏的编码进行转换,兼容性最好的是AVC(H264)格式 下面给大家介绍一个main方法对视频编码转换的工具类 jar包: ws.schild …

db2 jdbc驱动参数_JDBC详细整理(一)

一.什么是JDBCJDBC(Java DataBase Connectivity)就是Java数据库连接,说白了就是用Java语言来操作数据库。原来我们操作数据库是在控制台使用SQL语句来操作数据库,JDBC是用Java语言向数据库发送SQL语句。二.JDBC原理早期SUN公司的天才们想编写一套可以连接…

Java使用ffmpeg进行视频格式转换、音视频合并、播放、截图

上一篇进行了ffmpeg的下载及安装,在下面有安装步骤 本篇在上一篇的基础上进行代码封装,Java里使用ProcessBuilder模拟命令行调用ffmpeg进行视频格式转换、音视频合并、播放、截图。 需先安装ffmpeg FfmpegUtils封装类: ffplay、ffmpeg、ffp…

生物学专业_江南大学微生物学(发酵)20002008历年考研专业课真题汇编

说明 1. 海量考研真题免费发布,欢迎关注公众号『守望考研』;2. 想获取本文对应的PDF文档以便打印使用,欢迎关注公众号了解领取方法;PS: PDF版文档清晰度更高、水印更小南开大学861微生物学1997-2001、2003-2011历年考研专业课真题…

error: ‘XXX‘ is defined but never used (no-unused-vars)报错的解决方案

错误原因 我的项目安装了eslint规范,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误 解决方案 一、在package.json文件内加入如下代码:然后保存重启项目。 "rules":…

平流式初沉池贮砂斗计算_?初沉池、二沉池的作用与区别-亨孚科技

初沉池的主要作用如下:1、去除沉淀物或浮游物,减轻后续处理设施的负荷。使细小的固体凝聚成大粒子,强化固液分离效果。3.它对胶体物质有一定的吸附和去除作用。4、初沉池在一定程度上起调节池塘的作用,对水质发挥一定的均质效应。5.一些废水处…

Navicat连接Oracle数据库失败,提示无效的用户名和密码(Invalid username and password)

1、Navicat是一款非常好用的数据库管理工具,可是一段时间没有使用,突然发现之前建立的Oracle连接无法打开,提示要输入旧密码和新密码以及确认新密码,在Navicat管理工具中连接之前超过180天的Oracle数据库,连接的时候&a…

把关与服务的关系_泉州代做投标书-电子标书值得信赖 - 泉州广告服务

此外,土壤资源对于人们的重要性不言而喻。为了推行土壤环境攻坚治理,江苏省共布设国控点位个,其中,基础点位个,风险点位个,背景点位个,为开展土壤污染调查奠定基础。这些地区监测站点的成功铺设…