v-for动态添加class

最新推荐文章于 2023-07-10 21:46:09 发布
最新推荐文章于 2023-07-10 21:46:09 发布
阅读量716 收藏
点赞数
分类专栏： vue java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cza_of_north/article/details/103626926
版权
java 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏
前端
2 篇文章 0 订阅
订阅专栏

使用v-for循环  将选项内容全部填充   并且默认给第一项添加选中样式

如图所示  想要添加选中样式  必须在v-for的内容填充完毕才能进行调用

所以我这里使用了vue 的 watch 去监听一下 product.specification这个属性

并且调用  this.$nextTick  表示数据更新完毕之后来执行的内容

这里watch会在页面加载完毕和数据填充完毕的时候各调用一次

id是在填充的时候用循环的角标 index 来命名的

 

Cza_of_north
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
class根据状态 vue_vue中v-for通过动态绑定class实现触发效果
weixin_34663036的博客
03-05 780
vue动态绑定class练习。：class=“{ ‘类名1'：条件表达式，‘类名2'：条件表达式… }”v-for="(item,i) of list":key="i"class="item"@click="clickIndex=i":class="{'click':i==clickIndex}">export default {data() {return {list: [1, 2, 3,...
vue中v-for通过动态绑定class实现触发效果
10-17
主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 使用v-for 动态修改class
CSDN前端知识共享
03-14 8110
问题描述 通过v-for指令，按照index动态生成class 例如: .item-1 .item-2 .item-3 .item-4 .item-5 其中，1,2,3,4,5为循环遍历的下标。 源码实现 <template> <div class="game"> <div class="game_item" v
vue中对v-for循环出的新节点动态添加class
热门推荐
lijincheng77266的博客
10-08 1万+
不废话直接上代码(仅展示一个例子具体使用视情况而定) 上图是页面结构，第四行为三元运算符，将item.id==3作为判断条件，为true则设置class1的样式，否则设置class2的样式。 上图是数据 上图是样式 以下是效果图 ...
vue 列表选中 v-for class
aodizhi5710的博客
02-06 139
地址：https://jsfiddle.net/50wL7mdz/96567/ 列表循环，默认选择 样式控制 <script src="https://unpkg.com/vue"></script> <div id="app"> <p @click="addItems()">{{ message }}</p> &l...
Vuejs在v-for中,利用index来对第一项添加class的方法
11-26
（1）在v-for中，利用index来对第一项添加class 在CODE上查看代码片派生到我的代码片 <a> index来源于v-for，i表示遍历的数组的元素，index表示索引。 由于index从0开始，因此如果要指定第一项有active这个类，...
vue中v-for循环选中点击的元素并对该元素添加样式操作
11-20
但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 html： <div xss=removed class = 'addclass:isactive' click='...
vue中v-for循环给标签属性赋值的方法
12-29
1.给每个按钮添加class的属性值以及icon图标属性值，通过v-for实现自动添加样式，发现属性值无法显示，切记在属性前加上v-bind <html> <head> <meta charset=utf-8> <title>v-for在线测试...
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
12-28
这里使用的是给被点击的li... <div v-for=(item,index) click=clickAdd(index) key=index class={red:i> <div>{{item.name}} [removed] export default { data () { return { isShow: false, i: null, lis
vue v-for列表动态绑定class样式
menyanyu的博客
06-24 1567
vue v-for列表动态绑定class样式，原理其实很简单，当currentIndex为0时，数组下标0的元素的active为true，其余的为false，所以为true的元素class会生效。
Vue 实现v-for循环的时候更改 class的样式名称
10-15
主要介绍了Vue 实现v-for循环的时候更改 class的样式名称，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue v-for循环绑定class的问题
weixin_42776027的博客
12-01 6262
转载自https://segmentfault.com/q/1010000015412328/revision 我现在在做一个左侧栏的分类，json结构是这样的。 { "dataInfo":[ { "name":"我是买家", "dataList":[ { "title": "在线支付教程",
Vue框架中v-for和v-bind指令实现简单的动态class
GG_Zdd的博客
01-12 567
Vue框架中v-for和v-bind指令实现简单的动态class Vue框架中v-for和v-bind指令实现简单的动态class，鼠标点击按钮实现class动态变红 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:red
vue中v-for循环使用:class伪类判断颜色
qq_45442879的博客
03-27 428
vue中使用:class判断颜色。
vue2 v-for ,虚拟dom ，diff算法，动态class，动态style
Cxil的博客
11-24 1590
概念：.vue 中的template里面写的标签，都是模版，要被vue处理成虚拟dom对象，才会渲染现实到真实Dom页面上。介绍：内存生成一样的虚拟Dom结构 本质是个js 对象因为真实的dom属性好几百个，没办法快速的知道哪一个属性改变了。比如template 里面的标签结构对应的虚拟dom 结构以后vue数据更新，生成新的虚拟dom结构 和 旧的 dom结构 对比 利用diff算法，找不同，只更新变化的部分（重绘/回流）到页面。也叫打补丁。
v-for遍历数组或者对象，渲染结构、v-bind动态设置class和style
派拉斯兔子的博客
07-10 5099
作用：可以遍历数组或者对象，用于渲染结构。 遍历数组语法： ⚫ v-for="item in 数组名" ⚫ v-for="(item, index) in 数组名“ 遍历对象语法：v-for = "(value , key) in 对象名" 遍历数字语法：v-for = "item in 数字" key值：①、不写：默认按照下标给虚拟dom打标识。 ②、index：按照下标给虚拟dom打标识index！就地复用dom节点效率会低。 ③、id：按照下标给虚拟dom打标识id！就地复用dom节点效率会
v-for中通过动态绑定class来实现触发效果。
SilenceJude的博客
12-06 1105
vue动态绑定class练习。 ：class=“{ ‘类名1’：条件表达式，‘类名2’：条件表达式… }” &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;app-*&amp;quot;&amp;amp;gt; &amp;amp;lt;ul&amp;amp;gt; &amp;amp;lt;li v-for
v-for v-bind:class,动态改变li样式
LuckyMon的博客
03-18 2534
纯css，伪类，伪元素 在对元素样式做改变时，非常方便，也可以结合v-for，一起使用，但仅支持几种方式： link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候 v-for v-bind:class &amp;lt;li v-for=&quot;item in 4&quot; :key=&quot;item&quot; v-bind:class=&quot;{onshow:
v-for动态class名称
最新发布
07-28
在v-for循环中实现动态class名称的方法是在对象语法中使用计算属性。在给元素绑定class时，可以使用计算属性返回一个对象，对象的属性名是class名称，属性值是一个布尔值，根据条件判断是否添加该class。在你提供的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值