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+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
js中作用域的实例解析
Mar 16 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 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
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python中__init__和__new__的区别详解
2014/07/09 Python
Python中变量交换的例子
2014/08/25 Python
python实现将文本转换成语音的方法
2015/05/28 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
详解django中自定义标签和过滤器
2017/07/03 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
英国电子专家:maplin
2019/09/04 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
高中自我评价范文
2014/01/27 职场文书
物理力学求职信
2014/02/18 职场文书
太空授课观后感
2015/06/17 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书