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 相关文章推荐
js函数的延迟加载实现代码
Oct 11 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
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
SMARTY学习手记
2007/01/04 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
微信小程序服务器日期格式化问题
2020/01/07 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
毕业生简单求职信
2013/11/19 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
三查三看党性分析材料
2014/02/18 职场文书
人事专员工作职责
2014/02/22 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
Go获取两个时区的时间差
2022/04/20 Golang