vue中v-for循环如何将变量带入class的属性名中

效果：

项目调用的接口中有一个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的属性名中相关推荐

python变量名称跟着循环,在Python中使用列表中的名称循环创建新变量
How to create new variables with names from list? This: name = ['mike', 'john', 'steve'] age = [20, ...
c语言中赋值号左边必须为变量,.在C语言的赋值语句中，赋值号左边必须是(12)——青夏教育精英家教网——...
阅读下面的文言文,完成文后各题. 罗洪先,字迭夫,吉水人.父循,进士.历兵部武选郎中.会考选武职,有指挥二十余人素出刘瑾门,循罢其管事.瑾怒骂尚书王敞,敞惧,归部趣易奏.循故迟之,数日瑾败,敞乃谢循. ...
python中一个对象只能被一个变量引用吗_Python中for循环里的变量无法被引用的解决方法...
在之前的编程语言里,学到for循环里面是可以重置变量i的值的,然后让整个for循环从头开始,但是在python里面却行不通这是为什么呢? 在python中,for循环相当于一个迭代器(Iterator ...
c foreach循环_C ++中的foreach循环
c foreach循环介绍 (Introduction) The foreach loop in C++ or more specifically, range-based for loop was ...
php volist中作判断,ThinkPHP模板中判断volist循环的最后一条记录的验证方法
ThinkPHP模板中判断volist循环的最后一条记录的验证方法对于用过smarty做过php开发的朋友来说,应该都知道在smarty模板里面判断foreach循环是否是最后一个可以用$smart ...
stm32怎么调用for循环内部的变量_循环中的异步amp;amp;循环中的闭包
在这之前先要了解一下 for循环中let 和var的区别 var 是函数级作用域或者全局作用域,let是块级作用域看一个例子 function foo() { for (var ...
vue本地没事放到服务器上无限循环,解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制 ...
Vue 实现图片在循环中默认和选中之间的点击切换
Vue 实现图片在循环中默认和选中之间的点击切换 html <ul style="font-size:20px;"><li:key="lesso ...
vue中给v-for循环出来的元素分别加样式
vue中给v-for循环出来的元素分别加样式 1.绑动态样式` <div :class="box" v-for="(item, index) in datas&qu ...

vue中v-for循环如何将变量带入class的属性名中

vue中v-for循环如何将变量带入class的属性名中相关推荐

最新文章

热门文章