vue中v-for循环中class变量带入与style变量带入

最新推荐文章于 2024-04-02 13:33:28 发布
最新推荐文章于 2024-04-02 13:33:28 发布
阅读量4k 收藏 12
点赞数 7
分类专栏： 记录 文章标签： vue v-for class style 循环变量带入
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37632915/article/details/89675635
版权

初学vue碰到了变量不知道如何带入的问题，尝试了和寻找答案后做出以下总结：
话不多说直接上代码

<item class="item-icon-right" style="height: 50px" v-for="(item, index) in items_income" :key="index" @click.native="onItemClick(item.id)">
	<i class="icon ion-ios-arrow-right" style="color: #BBB"></i>
    <i :class="['iconfont',item.icon]" style="color: #11C1F3;font-size: 25px;line-height: 18px"></i>
    <div style="margin-top: -18px;margin-left: 40px">
	    <span :style="{color:item.title_color}">{{item.title}}</span>
    </div>
</item>

iconfont是固定的class

捂心
关注
  • 7
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中v-for循环选中点击的元素并对该元素添加样式
weixin_42371145的博客
01-12 1526
v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 解决方法：使用index索引，当点击一个元素时，将该元素的index索引赋给类样式的启用变量，如果该变量和index相等时，则启用该类样式 <template> <view> <view v-for="(item,index) in items" :
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue.js应用中，`v-for`循环常用于渲染列表数据。然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，...
vue中v-for循环如何将变量带入class的属性名中
热门推荐
eagle_88的专栏
04-02 1万+
开发中碰到的需求如下：如何实现？参考vue官方文档，没有找到。文档针对class的对象语法是在明确属性名的情况下，通过true or false动态显示class名，class名是固定的，针对class的数组语法虽然class名是动态的，但不适用v-for循环。而本例是在v-for循环中实现class名动态（赋变量值）。代码如下：&lt;template&gt; &lt;div class="q...
Vue+css用上v-for命令和:style=“{}“-实现信息一条一条出现的动画效果~~
最新发布
LCKNOW的博客
04-02 453
Vue+css用上v-for命令和:style="{}"-实现信息一条一条出现的动画效果~~
Vue循环语句渲染实现将循环体变量用于标签属性||Vue实现渲染不同CSS样式的列表
Charlesix59的博客
07-19 369
这一点能够实现，得益于Vue中，v-for比v-bind的优先级更高 如果直接再属性中写个 color=pep.color这样是不行滴，我们需要用到v-bind属性，如下 注意   :是v-bind：的简写 <tr id="fi"> <td v-for="pep in peps" :style="'background-color:'+(pep.color)"> {{pep.name}} <br /> {{pep.detail}}
vue v-for 循环中 绑定 style 传递参数 方法 在computed 中使用
weixin_44168929的博客
06-28 1163
常常遇到动态获取数据后，多种样式来判断字体的颜色，可以使用绑定style或者class，如 :style=“{ color: textColor, fontSize: item.fontSize + ‘px’ }” , :class=“Bclass(item)” 等 多种方法，所以在此记录一下。但是有的时候我想简洁代码，需要在style 或者class 中 传递 item 的参数。
VUE专题 V-for 循环style（样式）的方式尝试与总结
weixin_44131922的博客
05-02 1814
标签中 这里下面的红线是因为缺失了:key 做区分的原因，可以后来补上，这里演示暂不处理 对应数据 methods中的方法 说明 这里是为了循环颜色这一属性，通过第二部分中对应数据传入的值不同，在方法中拼接传入不同的值并直接在方法中返回样式的值。 ...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
主要介绍了Vue 实现v-for循环的时候更改 class的样式名称，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染...希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
vue中v-for通过动态绑定class实现触发效果
10-17
主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中v-for循环给标签属性赋值的方法
12-29
1.给每个按钮添加class的属性值以及icon图标属性值，通过v-for实现自动添加样式，发现属性值无法显示，切记在属性前加上v-bind <html> <head> <meta charset=utf-8> <title>v-for在线测试...
Vue 动态Class渲染、函数自带参数获取方法
qq_39241680的博客
09-01 1242
Vue 动态Class渲染、函数自带参数获取方法动态渲染class 属性JS 函数自带参数获取 动态渲染class 属性 在动态渲染过程中，使用参数判断，其用法如下： :class="[‘样式名称’: ‘逻辑判断条件’]" :class="[‘btn’: true]" JS 函数自带参数获取 function Fun(val1,val2){}; @click=“Fun($event, 2)” 在使用过程中，第一个参数是click自带参数的传入，第二个参数是自定义的参数 ...
VUE_03_样式绑定和v-for的简单介绍
oracle8090的博客
06-04 279
目录 <:class> <:style> for循环使用 普通数组 对象数组 循环对象 迭代数字 v-for 中key属性的使用 <:class> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
Vue 在for循环中动态添加类名及style样式集合
Shivy_的博客
02-23 4942
Vue 在for循环中动态添加类名及style样式集合
work-notes（6）：vue中 v-for，class 和 style 中绑定带入变量的写法，如何在style中加入变量？
jinzai9976的博客
04-14 1323
时间：2022-0x-xx 文章目录原因解释解决办法 原因解释 在 v-for 写入到 style 或 class，特别是绑定的 :style、:class 就不生效 解决办法 在 {} 内用 [] 括起变量 <div v-for="item in videoList" :key="item.index"> <live_video :class="{[item.itemKey]: !isExpand,}"> </live_video> </div&
vue v-for 样式赋值
Wisdom—Yoga—TaciturnKnight（WYT）
12-07 3741
v-bind:style="{'background-color': item.iconColor}"> {{item.name}} v-bind:style="{'background-color': item.iconColor}"> {{item.
vue 分类 传参
qq_42897782的博客
04-28 386
效果图 这里是接口的参数 首先，左边导航（tabBtn()，下标index）右边导航（tabBtn2()，下标index2，tabIdx2）导航用两个数组控制，以便于通过index(下标)判断当前需要显示的内容。 第二：确定请求接口是和哪个点击事件捆绑（左边导航还是右边导航) 第三：明确思路，把接口单独封装，通过点击事件确定参数的值，在点击事件里调用接口 接下来附上代码块 自定义数组 tabList: ['全部消息', '未读消息', '已读消息'], typeList:..
深入剖析Vue中v-for的使用及index作为key的弊端
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-17 683
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名，v-for 也支持使用可选的第二个参数表示当前项的位置索引。
vue中v-for循环添加图标
09-06
在Vue中，可以使用v-for指令将数据循环渲染为多个图标。 首先，我们需要准备一个包含图标名称的数组，例如： ``` data() { return { icons: ['icon1', 'icon2', 'icon3'] } } ``` 然后，在模板中使用v-for指令...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值