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

2024-10-14 16:41:25

在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添加class样式实例讲解

vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换.案例中将通过使用:class设置字体为红色. 1.新建一个html代码页面. 2.在html代码页面创建一个<div>同时添加id为app,并添加一段文本 3.引入vue.js文件.使用<scrtip>标签引入vue文件. 4.创建vue实例.新建一个<script>标签,然后使用new Vue()创建实例. 代码: <script&g
vue中v-for循环选中点击的元素并对该元素添加样式操作

相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: <div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'> <span>{{item.name}}</
vue中动态添加class类名的方法

vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2>     <p :class="{'p1'
vue中v-for通过动态绑定class实现触发效果

vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo
Vue2.0点击切换类名改变样式的方法

1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
Vue 实现v-for循环的时候更改 class的样式名称

在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'] } },
VUE中的无限循环代码解析

代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:
浅谈vue.js中v-for循环渲染

这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="
swiper在vue项目中loop循环轮播失效的解决方法

长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick
Vue中的v-for循环key属性注意事项小结

当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam
Vue用v-for给循环标签自身属性添加属性值的方法

我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下: 修改内容为 l
vue 使用v-for进行循环的实例代码详解

代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.n
vue data对象重新赋值无效(未更改)的解决方式

vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{},那么后面在方法用普通的js语法赋值会无效这里是data data() { return { model: {} }; } 这里是方法里的普通赋值 afterUpload(response) { this.model.icon = response.url; } 普通方法会无效,需要使用vue提供的方法重新显示声明 afterUpload(response) { this.$set(this.model,'icon',r
解决vue中的无限循环问题

项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制台的话运行是没问题的.但是控制台报了无限循环的错误. 下面是错误代码 html: js: 这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据.所以尽量不要直接在绑定的数据上使用方法来绑定.找到问题后下面就是解决办法. 因为选中商品后就要重新计算价格.所以我
antd+vue实现动态验证循环属性表单的思路

希望实现查询表单的某些属性可以循环验证必填项: 需求: 1.名称,对比项,备注必填,默认为一行,可增加多行 2.根据名称,动态请求对比项列表,名称变化时,清空该行当前选择的对比项思路:将整个搜索分成了两个表单,分别去做验证.一个是可动态添加的循环表单form,另一个为普通表单dateForm html <a-form :form="form" @keyup.enter.native='searchQuery'> <div class="dynamic-wr

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

相关推荐

随机推荐