在我们用三元表达式给DOM元素设置class时,使用空字符串,会导致渲染出一个没有值的空class, 为了避免这种情况出现,可以使用null来代替空字符串。
代码展示:
<!-- -->
<div :class="isBold ? 'bold' : ''">
<!-- <div class> -->
<!-- -->
<div :class="isBold ? 'bold' : null">
<!-- <div> -->
比较空字符串‘’和null
继续来分析上面2行代码
情况1:使用空字符串''
我们使用三元操作符,来决定是否给元素绑定class, isBold
为true时绑定,返回bold
,否则,返回
html代码:
<div :class="isBold ? 'bold' : ''"></div>
js代码:
data() {
return {
isBold: false
}
}
这时,渲染结果如下
<div class></div>
<!-- 空的class -->
如果isBold
为true
,渲染结果如下
<div class="bold"></div>
情况2:使用null
看看使用null
的渲染结果
<div :class="isBold ? 'bold' : null"></div>
data() {
return {
isBold: false
}
}
渲染结果如下
<div></div>
<!-- 很好 无空class>
如果isBold
为false
,渲染结果如下
<div class="bold"></div>
情况3:使用undefined
undefined
和null
的效果一样
<div :class="isBold ? 'bold' : undefined"></div>
<div></div>
<!-- 很好 无空class>
关于False值
当isBold
的值为以下值时,三元表达式返回的也是假值
false
undefined
null
NaN
0
"" or '' or `` (empty string)
使用对象的形式绑定class
使用对象的形式更加可读
<div :class="{ bold: isBold }"></div>
但三元表达式最佳的用处是在绑定复杂的class时
<div :class="isActive ? 'underline bold' : null"></div>
使用 &&
绑定class
来看看另外一种情况
<div :class="isBold && 'bold'"></div>
&&
不仅是一个逻辑操作符,它同样可以返回值,正如上面的代码,如果isBold
为真,它会返回bold
,但是isBold
为假的时候呢?
案例1:isBold
为false
<div :class="isBold && 'bold'"></div>
这个时候回返回空class
<div class></div>
案例2:isBold
为null
<div :class="isBold && 'bold'"></div>
为null
时不会有空class
<div></div>
案例3:isBold
为undefined
<div :class="isBold && 'bold'"></div>
为undefined
时也不会有空class
<div></div>
造成上面这种情况的出现不是&&
的问题,它只是用来做判断并返回值而已
所以,如果我们想要使用&&
时避免返回空class,最好用null
或者undefined
但我更推荐大家使用对象的或者数组绑定的语法去设置class