为什么vue中不建议使用空字符串作为className
在我们用三元表达式给DOM元素设置class时,使用空字符串,会导致渲染出一个没有值的空class, 为了避免这种情况出现,可以使用null来代替空字符串。
<!-- ❌ --> <div :class="isBold ? 'bold' : ''"> <!-- <div class> --> <!-- ✅ --> <div :class="isBold ? 'bold' : null"> <!-- <div> -->
比较空字符串''和null
继续来分析上面2行代码
情况1:使用空字符串''
我们使用三元操作符,来决定是否给元素绑定class, isBold为true时绑定,返回bold,否则,返回''
<div :class="isBold ? 'bold' : ''"></div>
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
空class就一定不对吗?
在W#C的标准中, 空class也是可以用的
<!-- 无错误 --> <div class>...</div> <!-- 无错误 --> <div>...</div>
HTML的语法用也没要求不准使用空的属性
但是,为了代码的可读性,建议大家不要使用空属性,特别是在需要操作DOM属性做判断时
空的属性很容易造成难以察觉的错误
e.target.classList
e.className
img.src
...
但是...
空的id属性是不被允许的
<!-- 错误 --> <div id>...</div> <!-- 错误 --> <div id="">...</div> <!-- 正确 --> <div id="name">...</div>
❌ Error: An ID must not be the empty string.
到此这篇关于为什么vue中不建议使用空字符串作为className的文章就介绍到这了,更多相关vue 空字符串作为className内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25