vue实现动态class

• 前端

总结一下,vue实现动态class主要通过以下三种方式

1 通过对象方式

动态绑定一个类名的写法
:

动态绑定多个类名的写法
:

如 ifOn / ifDisabled 都是vue的变量，为真则对应key的class类名生效

当动态class类名过多/条件判断过于复杂，可通过定义变量/使用computed属性来实现

定义变量方式

:
data() {
  return {
    classConfig:{ on: true, disabled: false }
  }
}

computed属性方式

data() {
  return {
    on: true,
    disabled: false
  }
}

computed: {
  classConfig: function () {
    return {
      on: this.on,
      disabled: this.disabled
    }
  }
}

2 通过数组方式

通过变量直接绑定
:
data() {
  return{
    className1:'className1',
    className2:'className2'
 }
}

通过三元表达式条件判断
单个
:
多个
:

3 通过数组+对象嵌套方式

:

4 总结

对象方法主要通过

{'className': Boolean}

Boolean为vue内部定义的变量，为真则生效

数组方法主要通过

[Boolean? 'className1': 'className2' ]

Boolean为vue内部定义的变量，为真则className1生效，反之则className2生效

两者结合主要是数组内嵌对象格式

className需要加引号

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/14807665ef.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐