Vue动态类的几种使用方法

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

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

• 利用带数据绑定

<button @click="isShow = !isShow">点击</button>
<div :class="{ colorRed: isShow }">哈哈哈</div>

data() {
  return {
  isShow: true
}

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

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

<div class="colorRed ">哈哈哈</div>

二、利用三元表达式切换样式

• 控制isShow 切换样式

<div :class="[isShow ?'colorRed':'colorBlue']">哈哈哈</div>

三、多个动态类的用法

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

<i :class="{'el-icon-d-arrow-left':!menuIsShow,'el-icon-d-arrow-right': menuIsShow}" 
	class="el-icon-d-arrow-left openMenu"
	@click="menuIsShow=!menuIsShow">
</i>

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

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

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