1. 程式人生 > >vue中v-for迴圈如何將變數帶入class的屬性名中

vue中v-for迴圈如何將變數帶入class的屬性名中

開發中碰到的需求如下:

如何實現?參考vue官方文件,沒有找到。文件針對class的物件語法是在明確屬性名的情況下,通過true or false動態顯示class名,class名是固定的,針對class的陣列語法雖然class名是動態的,但不適用v-for迴圈。而本例是在v-for迴圈中實現class名動態(賦變數值)。

程式碼如下:

<template>
	<div class="qq_face faceout">
        <a v-for="(value, key) in stack.faceData" :key="key" :title="value" :class="setClass(key)" @click="faceImgSel(value)">{{value}}</a>
        <!-- 將class值賦給方法,動態生成物件 -->
    </div>
</template>

export default {

	methods: {
        setClass(key) {
            let obj = {face: true}
            obj[`qqface${key}`] = true
            return obj
        },
    }
}

類似的,如果希望傳的不是key,而是value值,只要改傳參就好。

相關推薦

vuev-for迴圈如何變數帶入class屬性

開發中碰到的需求如下:如何實現?參考vue官方文件,沒有找到。文件針對class的物件語法是在明確屬性名的情況下,通過true or false動態顯示class名,class名是固定的,針對class的陣列語法雖然class名是動態的,但不適用v-for迴圈。而本例是在v-

vuev-for迴圈時只處理事件觸發項的內容(僅一項)

關於怎樣處理vue中v-for迴圈時對迴圈內容中單獨的一項的事件處理有如下方案:(1)獲取v-for迴圈內容中的下標值(val為navContent中的內容,index為下標)        <p v-for="(val,index) in navContent" cl

vuev-for迴圈選中點選的元素並對該元素新增樣式

相信大家都會遇到這種情況:v-for迴圈時,我只需要點選到的元素做出相應反應,其他的元素不變;但是往往所有v-for迴圈出的元素都會變化。如下面的程式碼:我需要點選到的元素新增一個類樣式,其他元素不變,但是這樣會導致所有的元素都會變化 html: <div v-for = "(item

vuev-for迴圈載入問題導致vue-awesome-swiper輪播失效問題

<swiper v-if="bannerList.length>0" :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide v-fo

Vue v-for迴圈的時候更改 class的樣式名稱

在v-bind:class上繫結索引函式 <div v-for="(shop,index) in shoplist" style="max-width: 20rem;" v-bind:class="calculate(index)"> calculate(i

vue通過v-for迴圈遍歷得到的值如何加到dom節點的屬性以及vue多選框選中的值渲染到頁面

話不多說直接上程式碼 <script> Vue.component('CheckBox',{ props:{ values:{ type:Array

Vue控制v-for迴圈次數的方法

在Vue中的遍歷方法v-for控制迴圈次數的方法可以通過以下兩種方法1.擷取迴圈的資料    v-for="(item,index) in domainList.slice(0, 2)"    用這樣的

vuev-for索引不要用key

spa 定義 pan class col color key 特性 不出 今天發現在給元素v-for渲染的時候,想給元素添加key特性存儲索引,發現不奏效: <div class="apic" v-for="(pic,index) in msg.pics" ..

Reactvuev-for操作。

map 上海 操作 let tor this city 遍歷數組 state class CityBean extends Component{ constructor(){ super(); this.state={

vuev-for 循環圖片加載路徑問題

mod .json 可能 圖片 回退 catch 既然 樣式 都是   先看一下產品需求,如下圖所示,   產品要求圖片和它的名稱一一對應,本來是非常簡單的需求,後臺直接返回圖片路徑和名稱,前臺直接讀取就可以了,但是我們沒有存儲圖片的服務器,再加上是一個實驗性的需求,圖片

Vuev-for應用

  1.v-for遍歷陣列 【v-for遍歷陣列語法】 v-for="item in items"  tems:要遍歷的陣列,需要在vue的data中定義好; item:迭代得到的陣列元素的別名。 【程式碼例子】 <div id="a

解決微信小程式、mpvue、vue 關於 wx:forv-for 迴圈次數的問題

微信小程式:wx:if="{{index<5}}" <view wx:for="{{dataArray}}" wx:key="index" wx:for-item="item" wx:if="{{index<5}}"></view>   mp

vue.js For迴圈vue.js v-for使用

vue.js For迴圈,vue.js v-for使用   ================================ ©Copyright 蕃薯耀 2018年11月28日 http://fanshuyao.iteye.com/   <!DOCTYPE h

vue v-for迴圈的用法

1、v-for迴圈普通陣列     ①建立vue物件     ② 迴圈資料     結果: 2、v-for迴圈物件陣列     ① 建立vue例項物件   &nb

vue v-for迴圈繫結class的問題

轉載自https://segmentfault.com/q/1010000015412328/revision 我現在在做一個左側欄的分類,json結構是這樣的。 { "dataInfo":[ { "name":"我是買家", "dataList":[

Vuev-for遍歷多層巢狀資料,不能重新渲染的問題

問題 { "properties": [ [ { "name": "property_name", "example": "travel_time", "value": "" }, { "name":

Vue.js教程(四):v-for迴圈操作

前言 本篇主要是Vue的迴圈操作,需要遍歷陣列。所以本篇嚴格來說有兩個知識點: 1、v-for迴圈使用 2、vue中陣列的定義 v-for基本使用 1、定義陣列 <script type="text/javascript"> var app4

vue v-for迴圈巢狀的探索(二)

使用v-for迴圈的目的就是為了處理大量型別重複的資料,歸根結底是一種有規律的資料,但是有些規律卻不是那麼容易的,很多時候,我們會使用到迴圈,甚至多重迴圈的巢狀,不同的迴圈巢狀對應著不同的json資料的結構,本篇主要講述的是使用v-for迴圈解決部分同,部分不同的情況,主要是

vue v-for迴圈解決img標籤的src動態繫結問題

在解決這個問題上,遇到了很多錯誤的方案,一直沒有跑通,有些是圖片標記出現了,但是圖片內容沒有出現,這就很讓人頭疼了,下面,我講解我操作成功的案例吧。1、目錄結構如下圖片放置在與src同級的static資料夾下,在這裡,我放置在slider中2、資料配置如下: 注意引入的路徑,

踩坑:javascriptfor迴圈變數不是Number型別導致for迴圈不執行

情景:從html獲取4對{起點元素(id記為start)和終點元素(id記為end)},遍歷起點到終點的所有元素,並打印出元素id(假設id連續)解決方案:Number(待轉換數)進行強制轉換js程式碼:控制檯:如上圖控制檯:第一對兒元素{43,46},進入for迴圈正常列印