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'] } }, 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的样式名称就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况: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> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1'
-
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通过动态绑定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
-
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
随机推荐
- JavaScript实现音乐自动切换和轮播
- Ewebeditor及fckeditork单引号问题的解决方法
- JS实现合并json对象的方法
- Prototype最新版(1.5 rc2)使用指南(1)
- 基于asp+ajax和数据库驱动的二级联动菜单
- 在电脑城混了三年了装机心得
- Android 物理按键整理及实例代码
- Oracle索引质量介绍和分析脚本分享
- ASP.Net 分页控件源码
- php中字符查找函数strpos、strrchr与strpbrk用法
- BootstrapTable refresh 方法使用实例简单介绍
- jsp base标签与meta标签学习小结
- Vue开发过程中遇到的疑惑知识点总结
- mysql导入sql文件报错 ERROR 2013 2006 2002
- Mysql5.5 InnoDB存储引擎配置和优化
- MySql Error 1698(28000)问题的解决方法
- php上的memcache和memcached两个pecl库
- 用生成器来改写直接返回列表的函数方法
- 使用SQL批量替换语句修改、增加、删除字段内容
- js 链式延迟执行DOME