Vue动态类的几种使用方法总结

这篇文章主要介绍了Vue动态类的几种使用方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Vue动态类的几种使用

动态类的操作比较简单，但是很实用。

点击显示或隐藏样式的做法

利用带数据绑定

哈哈哈

data() {   return {   isShow: true }

.colorRed {     color:red; } .colorBlue{     color:blue; }

代码含义：当isShow 为true时，添加类名colorRed ，div字体为红色，渲染结果如下：

哈哈哈

利用三元表达式切换样式

控制isShow 切换样式

哈哈哈

多个动态类的用法

案例：用带有图标的按钮展开列表和收起列表

el-icon-d-arrow-left 是 element自带的字体图标

  data() { return { menuIsShow: false }; },

小结：利用动态类可以节省很多代码，实现更复杂的功能。

Vue class动态类名

1. 三元表达式

//1. html    //2.style .stage-pass {     background: green; } .stage-nopass {     background: red; }

2. 对象的形式：可以写多个，用逗号分开（常用）。

3.传方法，在方法中返回类名，这个方法是可以触发的哦~，或者通过计算属性也是妥妥滴

// 使用方法     methods: {     // 动态获取类名     queryBoxClassNames() {         const classNames = {             JMJS: ['fixed-top', 'fixed-right']         }         return classNames[this.type] || ['fixed-bottom', 'fixed-left'];     }, }   ----------------------------------   // 使用计算属性    computed: {     // 动态获取类名     queryBoxClassNames() {         const classNames = {             JMJS: ['fixed-top', 'fixed-right']         }         return classNames[this.type] || ['fixed-bottom', 'fixed-left'];     },

相当于

4.根据计算属性判断添加类名，该写法多用于被封装的组件库内

      computed: {       customClass() {         var classes = [];         switch (this.position) {           case 'top':             classes.push('is-placetop');             break;           case 'bottom':             classes.push('is-placebottom');             break;           default:             classes.push('is-placemiddle');         }         classes.push(this.className);           return classes.join(' ');       }     }