效果：

?

項(xiàng)目調(diào)用的接口中有一個(gè)class名稱的數(shù)據(jù)集合：

?

因?yàn)樯婕癱lass的樣式都設(shè)計(jì)好了：

?

那么title我們知道在v-for中可以直接渲染進(jìn)去，那么如何將class名也一塊渲染進(jìn)去那？

我的icon圖標(biāo)的樣式分為統(tǒng)一的icon樣式和不一樣的class名稱樣式：

?

這里我們新建一個(gè)函數(shù)setClass：

methods: {setClass(value) {let obj = {face: true}obj["cate-icon "+`${value}`] = truereturn obj},復(fù)制代碼

可以看到，setClass的傳入的vulue的值是一個(gè)對(duì)象，這里cate-icon是公共的class樣式，根據(jù)您的需求可以在這里寫，記得最后加個(gè)空格進(jìn)行隔開，后面的是你要渲染的接口數(shù)據(jù)的class名稱，我們可以直接在上面定義好，就可以動(dòng)態(tài)的渲染class名稱了。

轉(zhuǎn)載于:https://juejin.im/post/5c8f8620f265da610445ea37

總結(jié)

以上是生活随笔為你收集整理的vue中v-for循环如何将变量带入class的属性名中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。