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}`] = true
      return obj
    },复制代码

可以看到，setClass的传入的vulue的值是一个对象，这里cate-icon是公共的class样式，根据您的需求可以在这里写，记得最后加个空格进行隔开，后面的是你要渲染的接口数据的class名称，我们可以直接在上面定义好，就可以动态的渲染class名称了。

转载于:https://juejin.im/post/5c8f8620f265da610445ea37