Vue添加类名的方式

文章目录 前言1.对象式写法2.数组式写法

---

前言

vue可以实现动态绑定类名，从而带来了几种添加类名的方式
灵活的使用这几种方式，对开发很有帮助

---

1.对象式写法

添加单个类名

<div class="handsome" :class="{ setClassName: classStatus }"></div>

data() {
  return {
    classStatus : true
  }
}

实现的效果

<div class="handsome setClassName">div>

添加多个类名
多个类名使用逗号隔开

<div class="handsome" :class="{ ning: ningStatus，wang: wangStatus}"></div>

data() {
  return {
    ningStatus: true,
    wangStatus:true
  }
}

实现的效果

<div class="handsome ning wang">div>

2.数组式写法

还可以使用三目运算符

<div class="love" :class="[{ning:ningStatus},{wangStatus?'ning':''} ]"></div>

data() {
  return {
    wangStatus: true
  }
}

实现的效果

<div class="love ning wang">div>