效果:

项目调用的接口中有一个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名称了。

Logo

前往低代码交流专区

更多推荐