vue v-for循环不同样式/控制显隐

最新推荐文章于 2023-03-16 08:00:00 发布
最新推荐文章于 2023-03-16 08:00:00 发布
阅读量914 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jadeyqc/article/details/106995605
版权
本文介绍了如何在Vue中使用`v-for`循环时为每个元素动态设置样式，通过`:style`或`:class`指令结合函数实现样式差异化。同时，利用`v-show`和`change`事件控制循环内的特定元素显示或隐藏，详细讲解了相关代码实现。
摘要由CSDN通过智能技术生成

通过 :style = "函数()" 或者 :class="函数" 可以通过函数加传参来控制不同列的样式。

<div class="start" v-for="(list,index) in lists" :key="list.id"  :style.prevent="aa(list.size)" ref="list">
            <div :class="className(list.id)" :style="{fontSize:list.size+'px'}"><div class="left">{
  {list.content}} </div>
                <div @click="change(index)" v-show="fire!=index" class="right" :class = "list.hot == true ? 'hot' : ''" :style="{width:list.size+'px',height:list.size+'px'}"></div>
                <div class="fire" v-show="fire==index" :style="{width:list.size+'px',height:list.size+'px'}">
最低0.47元/天 解锁文章
Jade琛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
<vue.js> 中对循环的目标的样式控制
weixin_34253126的博客
06-11 158
2019独角兽企业重金招聘Python工程师标准>>> ...
使用Vue中 v-for循环列表，控制按钮隐藏显示
莫不静好
08-30 2万+
v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 - 实现效果如图 需求描述： 第一个显示蓝色按钮，代表数据最终状态；其余按钮为灰色，显示数据流转记录。 返回的数据类型 前端页面代码 &lt;div class="leftProcessBox...
Vue v-for循环遍历数据，显示不同的class样式
zhuzicc的博客
11-07 2876
文章目录一、问题描述二、解决办法 一、问题描述 需要为v-for循环出来的盒子的图标添加不同颜色css样式。 二、解决办法 :class="'icon-'+sys.iconColor" 代码示例: <el-col v-for="(sys, i) in sysArr" :key="sys.id" :xs="5" :sm="5" :lg="3" class="card-panel-col"> <a :href="sys.url" target="blank"> &l
VUE-33 循环不同样式
m0_59214979的博客
01-06 1211
本节：循环内容没问题，那么怎么循环内容里，不同的样式？ 1.循环输出数据。重点：定义冒号，属性变成变量，可以循环不同的内容 2.循环的数据 3.定义变量的样式 完整代码： <template> <div class="container"> <div class="out"> <!-- 保证不换行 --> <div> <div class="top"&gt..
vue v-for循环的用法
beidaol的专栏
01-06 3136
v-for的in后面可以放普通数组、对象数组、对象和数字 v-for循环的时候，key属性只能使用number或String。 key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。 在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值。 1、v-for循环普通数组 ①...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染...希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
关于vue v-for循环解决img标签的src动态绑定问题
10-18
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中控制v-for循环次数的实现方法
10-17
今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue v-for循环之@click点击事件获取元素示例
10-16
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 实现v-for循环的时候更改 class的样式名称
10-15
在Vue.js中，当需要在`v-for`循环中为每个元素动态地更改CSS类时，我们可以利用`v-bind:class`指令。`v-bind:class`允许我们根据数据动态地绑定一个或多个类。这里我们将详细讲解如何实现这个功能，并提供一个实例来...
vue循环list数据_v-for循环中的key值设置(One Line周分享)
weixin_39737636的博客
12-04 3826
我们在v-for循环开发中需要给每一项去设置key,我们设置key的时候都习惯于用index去设置，比如 {{item.name}} data(){ return{ list:[ {name:'小明'}, {name:'小王'}, {name:'小李'} ] }},methods:{ deleteItem(){ this.list.splice(index,1) }}我们项目中需要个删除功能，...
Java中List的五种去重方法及效率对比，你都用对了吗？
程序员麦冬的博客（公众号同名）
11-17 707
01、使用两个for循环实现List去重(有序) /**使用两个for循环实现List去重(有序) * * @param list * */ public static List removeDuplicationBy2For(List<Integer> list) { for (int i=0;i<list.size();i++) { for (int j=i+1;j<list.size();j++) {
vue——如何给v-for循环出来的元素设置不同的样式
weixin_44613294的博客
01-23 1万+
例如给循环出来的四个盒子设置不同的背景色 第一步：给要循环的盒子动态绑定class名 并且传入一个数组 &amp;lt;div v-for=&quot;(i,a) in serve&quot; class=&quot;sever_box2&quot;&amp;gt; &amp;lt;div :class=&quot;sstt[a]&quot;&amp;gt; &a
Vue案例
舞鹤白沙编码日志
04-20 1682
1.实现简单记事本 1.1 功能 1.1.1 新增内容 步骤 1）生成列表结构(v-for 数组) 2）获取用户输入(v-model 双向绑定) 3）回车,新增数据(v-on .enter事件修饰符) 4）页面布局不熟悉,可以通过审查元素的方式快速找到元素 1.1.2删除内容 步骤 1）点击删除指定的内容( 根据索引删除元素) 2）在methods中添加一个删除的方法,使用splice函数进行删除 1.1.3统计操作 步骤 1）统计页面信息的个数,就是列表中的元素的个数. 2）获取 lis..
VUE 模板 v-if 判断 数组是否为空
猎人在吃肉
07-09 1万+
vue 判断数组是否为空 为空：array == undefined ||array == null || array.length <= 0 (顺序不能调换) 不为空： array !==undefined &&array != null || && array.length > 0 <ul v-if="commentList == undefined ||commentList == null || commentList.length <=
vue 里面通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的id名
热门推荐
guoyiq的博客
02-22 4万+
这是循环出来的多个div循环的数组加上这个方法就可以为每个div添加一个id 为 person_1,person_2 ,person_3................
vue用v-for循环之后布局样式错乱的问题
qq_68155756的博客
03-16 484
先描述一下我出现问题的场景，用v-for循环表格的每一项时，表格与元素距离随着循环次数增加而增加。经过一番调试之后，发现是因为之前需求要用表格0.5的线做，所以用transform:scale(0.5)缩放方法实现的，但是缩放不脱离文档流，还是占原来高度的大小，所以看起来距离增加了。去掉缩放属性距离恢复正常
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
weixin_45453560的博客
07-29 6856
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
vue如何动态获取元素的宽width和高height
weixin_48082725的博客
06-01 3725
vue的自定义指令directive自动计算宽度和高度变化 Vue.directive('resize',{ // 指令的名称 bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象 let width = '', height = ''; function isReize() { const style = document.defaultView.getComputedStyle(el);
vue v-for 循环 循环结果并排div
最新发布
07-22
你可以使用 Vue.js 的 v-for 指令来循环一个数组或对象，并使用 CSS 的 flexbox 布局来将循环结果并排显示。 下面是一个简单的示例代码，展示了如何使用 v-for 循环并排显示 div 元素： ```html <template> <div class="container"> <div v-for="item in items" :key="item.id" class="item"> {{ item.text }} </div> </div> </template> <style> .container { display: flex; } .item { flex: 1; margin: 10px; padding: 10px; border: 1px solid gray; } </style> <script> export default { data() { return { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, // ... ] }; } }; </script> ``` 在上面的代码中，我们将一个容器元素设置为 flex 布局，并通过 v-for 循环渲染 div.item 元素。每个循环的项都通过 :key 属性指定一个唯一的标识符，这对于 Vue.js 来管理和跟踪每个元素的变化非常重要。 然后，我们使用 CSS 来设置每个 div.item 元素的样式，使其并排显示，并具有一些间距和边框。 请注意，这只是一个简单示例，你可以根据自己的需求进行调整和扩展。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值