电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue 實(shí)現(xiàn)v-for循環(huán)的時(shí)候更改 class的樣式名稱

瀏覽:37日期:2023-01-06 09:02:05

在v-bind:class上綁定索引函數(shù)

<div v-for='(shop,index) in shoplist' v-bind:class='calculate(index)'>

calculate(index) 此處必須添加index參數(shù)

data(){ return{colorList:[’primary’,’danger’,’secondary’,’info’] } }, methods:{ calculate(index){var nm = this.colorList[Math.floor(Math.random() * this.colorList.length)];return 'card mb-3 col-lg-3 border-'+nm; } }

補(bǔ)充知識(shí):vue——如何給v-for循環(huán)出來的元素設(shè)置不同的樣式

例如給循環(huán)出來的四個(gè)盒子設(shè)置不同的背景色

第一步:給要循環(huán)的盒子動(dòng)態(tài)綁定class名 并且傳入一個(gè)數(shù)組

<div v-for='(i,a) in serve' class='sever_box2'> <div :class='sstt[a]'> <img :src='http://www.hdgsjgj.cn/bcjs/i.imgs' alt=''/> <router-link :to='i.url'><span>{{i.title}}</span> </router-link> <p>{{i.english}}</p> </div> </div>

第二步:在data中定義這個(gè)數(shù)組

data() { return { sstt: [ 'ss1', 'ss2', 'ss3', 'ss4', ] }

第三步:在style中分別設(shè)置顏色

.ss1{ background: #71b262; } .ss2{ background: #6288b2; } .ss3 { background: #ecac60; } .ss4{ background: #f87171; }

完成啦!

Vue 實(shí)現(xiàn)v-for循環(huán)的時(shí)候更改 class的樣式名稱

以上這篇Vue 實(shí)現(xiàn)v-for循環(huán)的時(shí)候更改 class的樣式名稱就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 电渗析,废酸回收,双极膜-山东天维膜技术有限公司 | 压缩空气检测_气体_水质找上海京工-服务专业、价格合理 | 无尘烘箱_洁净烤箱_真空无氧烤箱_半导体烤箱_电子防潮柜-深圳市怡和兴机电 | 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 重庆LED显示屏_显示屏安装公司_重庆LED显示屏批发-彩光科技公司 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 橡胶接头|可曲挠橡胶接头|橡胶软接头安装使用教程-上海松夏官方网站 | 顺辉瓷砖-大国品牌-中国顺辉| BOE画框屏-触摸一体机-触控查询一体机-触摸屏一体机价格-厂家直销-触发电子 | 新型锤式破碎机_新型圆锥式_新型颚式破碎机_反击式打沙机_锤式制砂机_青州建源机械 | 微信聊天记录恢复_手机短信删除怎么恢复_通讯录恢复软件下载-快易数据恢复 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 | 抓斗式清污机|螺杆式|卷扬式启闭机|底轴驱动钢坝|污水处理闸门-方源水利机械 | 单机除尘器 骨架-脉冲除尘器设备生产厂家-润天环保设备 | 电镀标牌_电铸标牌_金属标贴_不锈钢标牌厂家_深圳市宝利丰精密科技有限公司 | 不锈钢/气体/液体玻璃转子流量计(防腐,选型,规格)-常州天晟热工仪表有限公司【官网】 | 高压贴片电容|贴片安规电容|三端滤波器|风华电容代理南京南山 | DWS物流设备_扫码称重量方一体机_快递包裹分拣机_广东高臻智能装备有限公司 | 钢结构-钢结构厂房-钢结构工程[江苏海逵钢构厂] | LHH药品稳定性试验箱-BPS系列恒温恒湿箱-意大利超低温冰箱-上海一恒科学仪器有限公司 | 品牌广告服务平台,好排名,好流量,好生意。 | 杭州实验室尾气处理_实验台_实验室家具_杭州秋叶实验设备有限公司 | ALC墙板_ALC轻质隔墙板_隔音防火墙板_轻质隔墙材料-湖北博悦佳 | 聚合甘油__盐城市飞龙油脂有限公司 | 广州监控安装公司_远程监控_安防弱电工程_无线wifi覆盖_泉威安防科技 | 消电检公司,消电检价格,北京消电检报告-北京设施检测公司-亿杰(北京)消防工程有限公司 | 结晶点测定仪-润滑脂滴点测定仪-大连煜烁 | 蔡司三坐标-影像测量机-3D扫描仪-蔡司显微镜-扫描电镜-工业CT-ZEISS授权代理商三本工业测量 | 纸箱网 -纸箱机械|设备|包装纸盒|包装印刷行业门户网站 | 民用音响-拉杆音响-家用音响-ktv专用音响-万昌科技 | 北京模型公司-军事模型-工业模型制作-北京百艺模型沙盘公司 | 气动球阀_衬氟蝶阀_调节阀_电动截止阀_上海沃托阀门有限公司 | 盐城网络公司_盐城网站优化_盐城网站建设_盐城市启晨网络科技有限公司 | 优考试_免费在线考试系统_培训考试系统_题库系统_组卷答题系统_匡优考试 | 佛山市钱丰金属不锈钢蜂窝板定制厂家|不锈钢装饰线条|不锈钢屏风| 电梯装饰板|不锈钢蜂窝板不锈钢工艺板材厂家佛山市钱丰金属制品有限公司 | 陕西安玻璃自动感应门-自动重叠门-磁悬浮平开门厂家【捷申达门业】 | 行吊_电动单梁起重机_双梁起重机_合肥起重机_厂家_合肥市神雕起重机械有限公司 | 电动葫芦|防爆钢丝绳电动葫芦|手拉葫芦-保定大力起重葫芦有限公司 | 广东西屋电气有限公司-广东西屋电气有限公司 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 深圳离婚律师咨询「在线免费」华荣深圳婚姻律师事务所专办离婚纠纷案件 |