效果：

?

項目調用的接口中有一個class名稱的數據集合：

?

因為涉及class的樣式都設計好了：

?

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

我的icon圖標的樣式分為統一的icon樣式和不一樣的class名稱樣式：

?

這里我們新建一個函數setClass：

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

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

轉載于:https://juejin.im/post/5c8f8620f265da610445ea37

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。