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从头学起第二讲
Jul 04 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
原生javascript实现分页效果
Apr 21 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
JavaScript实现星级评价效果
May 17 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
解决vuex刷新数据消失问题
Nov 12 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
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
用Simple Excel导出xls实现方法
2012/12/06 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
python的debug实用工具 pdb详解
2019/07/12 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
合作意向书格式及范文
2014/03/31 职场文书
小摄影师教学反思
2014/04/27 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
毕业论文致谢词
2015/05/14 职场文书
对公司的意见和建议
2015/06/04 职场文书