Vue 实现v-for循环的时候更改 class的样式名称


Posted in Javascript onJuly 17, 2020

在v-bind:class上绑定索引函数

<div v-for="(shop,index) in shoplist" style="max-width: 20rem;" v-bind:class="calculate(index)">

calculate(index) 此处必须添加index参数

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;
      }
    }

补充知识:vue——如何给v-for循环出来的元素设置不同的样式

例如给循环出来的四个盒子设置不同的背景色

第一步:给要循环的盒子动态绑定class名 并且传入一个数组

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

第二步:在data中定义这个数组

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

第三步:在style中分别设置颜色

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

完成啦!

Vue 实现v-for循环的时候更改 class的样式名称

以上这篇Vue 实现v-for循环的时候更改 class的样式名称就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue路由教程之静态路由
Sep 03 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 #Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 #Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 #Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 #Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 #Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 #Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 #Javascript
You might like
我的php学习笔记(毕业设计)
2012/02/21 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php防止用户重复提交表单
2015/11/02 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
javascript整除实现代码
2010/11/23 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
jQuery设计思想
2017/03/07 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
python的Template使用指南
2014/09/11 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
python实现画图工具
2020/08/27 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
shell的种类有哪些
2015/04/15 面试题
绿化先进工作者事迹材料
2014/01/30 职场文书
校园活动宣传方案
2014/03/28 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
五年级小学生评语
2014/12/26 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
高考升学宴主持词
2019/06/21 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书