实现动态添加类名几种方法

一、

三元表达式   条件 ? (条件为ture时) '' : (条件为false时)''   (个人理解)

优点：简单 

缺点：不适合过多的判断

// 三元表达方式
// 条件 ? (条件为ture时) '' : (条件为false时)''
<p :class="isBoolean ? 'isTrue' : 'isFalse' ">三元表达方式</p>

二、

对象形式，使用花括号进行包裹   (个人理解)

优点：以对象的形式可以写多个，用逗号分开

缺点：如果过多的话，不宜阅读

// :class="{'类名' : 条件}"
<p :class="{'ClassName' : true}">对象的形式</p>
// 如果过多的话，可以用逗号进行隔开
<p :class="{'ClassName' : false, 'ClassName1' : true}">对象的形式</p>

三、

数组形式，使用中括号进行包裹   (个人理解)

优点：便于阅读

缺点：需配合变量进行使用

const className = 'name'
const className1 = 'name1'
<p :class="[className , className1 ]">数组的形式</p>

四、

数组和对象进行联合使用

 <p :class="[{'className': false}, className]">数组和对象</p>