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 相关文章推荐
jQuery的deferred对象使用详解
Aug 20 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
ajax异步请求详解
Jan 06 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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
基于mysql的bbs设计(三)
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php数组查找函数总结
2014/11/18 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
表单提交验证类
2006/07/14 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
详解vue中axios的封装
2018/07/18 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
Python xlwt模块使用代码实例
2020/06/10 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
安全生产一岗双责责任书
2014/07/28 职场文书
假释思想汇报范文
2014/10/11 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
实用求职信模板范文
2019/05/13 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
golang的文件创建及读写操作
2022/04/14 Golang