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

127 篇文章 2 订阅
111 篇文章 1 订阅

效果:

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值