Vue for循环展示不同的css样式

最新推荐文章于 2024-04-27 05:22:24 发布
最新推荐文章于 2024-04-27 05:22:24 发布
阅读量2.5k 收藏 11
点赞数 2
文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RAGACM/article/details/109378352
版权 
<div v-for="(item,index) in listObj" :key="index">
	<div style="height:60px;float:left" v-bind:class="{urgent:item.status==1,moderate:item.status==2,idle:item.status==3}">
	</div>

.urgent{
	width:65%;
	float:left;
	border-left:2px solid rgba(251,49,47,1);
	border-top:1px solid gray
}
.moderate{
	width:65%;
	float:left;
	border-left:2px solid rgba(255,159,39,1);
	border-top:1px solid gray
}
.idle{
	width:65%;
	float:left;
	border-left:2px solid rgba(7,181,0,1);
	border-top:1px solid gray
}

效果图：
在这里插入图片描述

一直在努力的笨鸟
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
05-vue-条件循环渲染样式
m0_57103348的博客
08-30 363
1.使用的变量为true就显示,false就隐藏。2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果。3.v-if的做法是删除节点,v-show做法是操作css的display:none。2.在vue2.0中,v-if和v-for写在一起时候会出现的问题(面试)v-if具有较高的 切换消耗,常常用在用户不常切换的模块。v-show具有较高的性能消耗,常常用在频繁切换的模块中。切换模块，它的属性值等会占用内存，更高的内存消耗。根据它们底层的设计不一样有各自的使用场景。...
在vue里如何给v-for循环出来的元素设置不同的样式
qq_43486347的博客
11-19 1628
在vue里如何给v-for循环出来的元素设置不同的样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
Web前端--HTML+CSS+JS新型冠状病毒射击小游戏_js射击小游戏源码
最新发布
2401_84434331的博客
04-27 962
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
VUE循环 + CSS 实现布局
momo_mom177的博客
04-09 845
实现样式图： <div class="tool-figure-note-box"> <div v-for="(figureNoteItem, figureNoteIndex) in list" :key="figureNoteIndex"> <template v-if="figureNoteItem.show"> <div class="figure-note-title">{{ figureNoteItem.ti
Vue v-for循环遍历数据，显示不同的class样式
zhuzicc的博客
11-07 2901
文章目录一、问题描述二、解决办法 一、问题描述 需要为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根据不同值改变css样式
cyx1874的博客
01-14 5093
当值不固定时，同时改变css的样式 原文：http://www.cnblogs.com/can-dy/p/7364760.html &lt;div class="rack" v-for = "(item,idx) in items" :key="idx" :class = "{rackA:item.num==1, rackB:item.num==2, rack...
Vue.js 循环语句
qq_44336097的博客
04-17 277
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <ol> <li v-for="site in
v-for循环中动态设置css样式
wwf1225的博客
05-15 7590
template中： <view class="pop-item2" v-for="(item,index) in popList" :key="index" > <view class="pop-item2-2" v-bind:class="{changeColor:index%2==0...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
在Vue.js中，当需要在`v-for`循环中为每个元素动态地更改CSS类时，我们可以利用`v-bind:class`指令。`v-bind:class`允许我们根据数据动态地绑定一个或多个类。这里我们将详细讲解如何实现这个功能，并提供一个实例来...
vue中v-for循环选中点击的元素并对该元素添加样式操作
11-20
但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 html： ()'> <span>{{item.name}} css： .addclass{ color : red;...
vue2.0 可折叠列表 v-for循环展示的实例
10-18
在这个实例中，我们将探讨如何使用`v-for`循环来遍历数据并展示列表，以及如何通过点击事件控制列表的展开和折叠。下面我们将详细分析这个实例中的关键点。 1. **`v-for`循环**： `v-for`是Vue中的一个指令，用于...
vue双层循环添加点击样式
土豆发芽了
04-08 1218
类似于; 代码如下: // html <div class="mt1" v-for="(item,index) in questionArr" :key="item.id"> <span class="name">{{index+1}}.{{item.questionText}}</span> <div class=" qudao"> <span class="mt1" v-for="(el,i) in item.optionLi
vue style样式动态绑定 根据for循环中的标识进行判断 展示不同的样式
Libertied的博客
04-17 3806
话不多说，贴代码，具体的可以去贴上去试试，主要其实不在js代码 而是在于style的动态样式绑定 <view class="segBgView"> <block v-for="(item,index) in segTitleArr" :key="index"> <view class="segItem" @cl...
vue 循环渲染 每条数据显示不同的样式 classs绑定多个样式
oYuLian的博客
06-21 5877
一.固定样式 &lt;p class="qiu1" @click="hexit(1)" :class="clickType.indexOf(1)&gt;-1?'exitqiu':''" v-if="qiuData.length&gt;0"&gt; &lt;img src="../..
vue 循环根据index动态绑定css样式
这里是前端，是不一样的前端
09-11 1585
一、html部分 <ul> <li v-for="(item,index) in icon_list" :key="index" @click="changeClass(index,item.path)"> <router-link :to="item.path" :class="{ 'active-class': nowIndex === index }"> <img :src="item.icon
vue根据后端数据，v-for渲染不同样式
qq_41613524的博客
08-09 1481
vue根据后端数据，v-for渲染不同样式 效果图 数据 [ { "Type": "1", "number": "大西几", "id": "1" }, { "Type": "3", "number": "小脑斧", "id": "1" }, { "Type": "2", "number": "严白虎", "id": "1" }, { "Type": "2", "number": "好的话", "id": "1" }, { "Type": "1", "number": "打碎u",
Vue+css用上v-for命令和:style=“{}“-实现信息一条一条出现的动画效果~~
LCKNOW的博客
04-02 507
Vue+css用上v-for命令和:style="{}"-实现信息一条一条出现的动画效果~~
vue怎样给v-for循环出来的元素动态设置不同的样式
南北极之间
10-18 3188
用：class即可 使用遍历时的索引值。动态生成不同的class比如class1，class2以此类推 代码： <div class="common-title-part-cont part-cont-rt-box"> <el-row v-if="typeImg.length>0" :gutter="10"> <el-col v-for="(item,index) in typeImg"
CSS实现背景颜色循环播放效果
Ijiran的博客
11-19 4458
颜色的循环播放效果？朋友是在docker中文网站上看到的，附上链接https://docs.docker-cn.com/，一看确实很漂亮。 那他们是如何实现的呢，其实没有用什么高端的技术，只是使用了css基本的animation动画效果，网上也有很多例子。 animation的属性大概分为这几个， animation: colorswitch 20s infinite; 我们来看这...
vue for循环数组对象怎么判断选择
06-07
在Vue中，可以使用v-for指令来遍历数组或对象并进行渲染。如果你要选择数组对象中的某个元素进行操作，可以在v-for中使用v-bind:key和v-bind:class指令来指定元素的唯一标识和样式。 例如，假设你有一个包含以下数据的数组对象： ``` items: [ { id: 1, name: 'Apple', selected: false }, { id: 2, name: 'Banana', selected: true }, { id: 3, name: 'Orange', selected: false } ] ``` 你可以使用以下代码在Vue模板中遍历数组对象并渲染： ``` <ul> <li v-for="item in items" v-bind:key="item.id" v-bind:class="{ 'selected': item.selected }"> {{ item.name }} </li> </ul> ``` 在这个例子中，v-for指令将遍历items数组对象并将每个元素渲染为<li>元素。v-bind:key指令将item.id作为每个元素的唯一标识。v-bind:class指令将根据item.selected的值添加一个名为“selected”的CSS类。 如果你想要选择某个元素进行操作，可以在Vue实例中定义一个selectedItem属性，并在模板中使用v-on:click指令来更新它。例如： ``` data: { selectedItem: null, items: [ { id: 1, name: 'Apple', selected: false }, { id: 2, name: 'Banana', selected: true }, { id: 3, name: 'Orange', selected: false } ] }, methods: { selectItem(item) { this.selectedItem = item; } } ``` 在模板中，你可以使用以下代码来选择一个元素： ``` <ul> <li v-for="item in items" v-bind:key="item.id" v-bind:class="{ 'selected': item === selectedItem }" v-on:click="selectItem(item)"> {{ item.name }} </li> </ul> ``` 在这个例子中，v-on:click指令将调用selectItem方法并将当前元素作为参数传递给它。selectItem方法将更新selectedItem属性的值，并将选定元素的样式更改为“selected”。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值