vue中用v-for循环数据并设置点击的子元素增加样式

最新推荐文章于 2024-05-17 17:28:18 发布
最新推荐文章于 2024-05-17 17:28:18 发布
阅读量444 收藏
点赞数
文章标签： html5 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jane0129/article/details/131411619
版权

1.自定一个变量isSelect，表示选中的子元素下标

2.添加点击事件，点击元素时将index赋值给isSelect

3.用三元表达式判断当选中子元素的下表等于index时增加的样式内容，即在css当中写

  .selec{样式内容}

 

 

 

 

Jane0129
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
主要介绍了Vue用v-for给循环标签自身属性添加属性值的方法，文中大家给大家列举了三种方法 ,需要的朋友可以参考下
如何给Vue v-for循环渲染出的元素（导航栏） 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换
m0_46470372的博客
03-17 7134
如何给Vue v-for循环渲染出的元素 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换 能够实现或解决的问题 给Vue v-for循环出的元素批量添加点击事件，并以自己在数组中的下标为参数 给Vue v-for循环出的元素批量添加点击后激活的css类（三元运算符方式），且在点击其他同列元素的时候自动取消该类 给Vue v-for循环出的元素添加 切换路由 的事件 正文 ...
Vue中v-for循环出的数据，点击哪个时，给哪个动态添加类名
qq_43537814的博客
03-01 2164
点击哪个就给哪个加类名 <template> <div class="box"> <!-- 方法一: --> <div v-for="(item,index) in items" class="ie" :class="isactive==index?'addclass':''" :key="index" @click="onclick(index)" > &lt
vue中v-for循环选中点击的元素并对该元素添加样式
热门推荐
I_recluse的博客
01-13 1万+
相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 html: &lt;div v-for = "(item,index) in items"  :class = 'addclass:isactive'  @cli...
为每一个 v-for循环出来的添加点击事件思路
weixin_43755104的博客
07-30 1940
文章目录 思路 首先在data中写入对象数组，并且写个可以if判断的标志 如下图 upFlag是个标志，action也是个标志 当action: 0是一个状态，action:1是另一个状态 当状态改变时发生什么事件，例如改变背景色，切换显示不同的div，切换背景图片， 改变背景颜色是:class不同的样式，显示不同的div是用v-if判断是true还是false来进行展示，换背景图片与切换显示一样无非就是切换显示不同的img, 切换不同的背景颜色一般用到的是3元表达式，当标志为1或者为0时绑定不同
vue改变循环遍历后的数据实例
10-16
今天小编就为大家分享一篇vue改变循环遍历后的数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中点击按钮添加样式
hum1108的博客
12-21 8105
此文章只是用于记录 1、遍历的元素在点击时添加样式 html <div class="midadd"> <template v-for="(item, index) in knowTypelist"> <div class="mid" :key="item.id" @click="change(index)" :class="{ active: index == number, activ: index != numb
vue动态点击添加样式
qq_63608386的博客
11-11 1759
通过刚才的绑定：:class = "isclass == index?'addclass' : '' "最后的效果就是点击哪个input框，哪个input框就被添加了这个addclass的样式。我的是点击下面的input给上面的input添加样式，定位到一起了。所以让这个isClass默认为-1，不等于任何一个input框。给下面的input绑定一个focus焦点事件并且传一个下面。在上面的input v-bind一个class。v-for循环的多个input框点击添加样式。
vue 多标签循环 可点击、选中、样式变化
xuxingyuan_的博客
05-26 595
点击标签时，通过 indexOf() 方法特性进行判断，如果大于 -1，则是默认样式，反之则是第二套样式并将选中标签的 id 通过 push 方法添加到 data 中定义好的数组 (gather) 中；因为后端人员想要的数据格式是字符串拼接的格式，所以最后我又通过 join 方法将数组转换成字符串并以逗号隔开，如果想要数组集合则不用转。首先循环遍历标签，然后我们要给标签加一个点击事件，并拿到每一个标签的 id(item.id) 作为参数传递到方法中；
vue中给v-for循环出来的元素分别加样式
我的博客
09-14 1823
vue中给v-for循环出来的元素分别加样式 1.绑动态样式` <div :class="sstt[index]" v-for="(item, index) in datas" :key="index"> <div class="da"> <div class="box-typ">{{ item.name }}</div> <div class="one">{{ item.desc }}</
Vue v-for循环之@click点击事件获取元素示例
10-16
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中v-for循环选中点击的元素并对该元素添加样式操作
11-20
相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
主要介绍了Vue 实现v-for循环的时候更改 class的样式名称，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue的 v-for 循环中图片加载路径问题
10-18
今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue循环的动态绑定class v-for循环逐步添加样式，改变文字
weixin_55553121的博客
05-08 1941
.fail{ background-color:#fedede; } //.fail错误样式变红 <van-form@submit="onSubmit"class="Submit"> <div class="p" v-for="(items,index)incellList" :key="index" :class="items.failisshow?...
vue的v-for循环中单独给元素设置点击事件的样式
weixin_68658847的博客
02-10 2922
vue的v-for循环中单独给元素设置点击事件的样式
vue变更v-for列表多个项目的颜色和选择项目
xc9711的博客
05-18 927
前言 变更v-for遍历的列表的颜色看似简单，但是细细思考，你会发现一个问题，让列表中的某一个进行变换是很简单的，但是如何对根据自己选择的多个进行变更颜色呢？为了实现这个目的，你得确定选择的是哪一项，如果选择多个，应该有哪些下标的列表是需要变色的等等需要考虑的因素。 本文章主要以实现变更颜色为主，也有涉及一些选择选中的项目代码 实现单个列表进行变色 单个的变色很简单 // 颜色样式 <style> .red{ color: red; } </style> <!-- ht
【html5】01-了解HTML5
最新发布
m0_68467925的博客
05-17 628
了解HTML5；引入HTML5目的；HTML5新特性；优缺点
vue中v-for循环添加图标
09-06
在Vue中，可以使用v-for指令将数据循环渲染为多个图标。 首先，我们需要准备一个包含图标名称的数组，例如： ``` data() { return { icons: ['icon1', 'icon2', 'icon3'] } } ``` 然后，在模板中使用v-for指令...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值