为什么vue中不建议使用空字符串作为className

目录

• 比较空字符串''和null
  
• 情况1：使用空字符串''
  
• 情况2：使用null
  
• 情况3：使用undefined
• 使用对象的形式绑定class
  
• 使用 &&绑定class
  
• 案例1：isBold为false
  
• 案例2：isBold为null
  
• 空class就一定不对吗？
  

在我们用三元表达式给DOM元素设置class时，使用空字符串，会导致渲染出一个没有值的空class, 为了避免这种情况出现，可以使用null来代替空字符串。

比较空字符串''和null

继续来分析上面2行代码

情况1：使用空字符串''

我们使用三元操作符，来决定是否给元素绑定class, isBold为true时绑定，返回bold，否则，返回''

data() {
  return {
    isBold: false
  }
}

这时，渲染结果如下

如果isBold为true，渲染结果如下

情况2：使用null

看看使用null的渲染结果

data() {
  return {
    isBold: false
  }
}

渲染结果如下

...


...

HTML的语法用也没要求不准使用空的属性

但是，为了代码的可读性，建议大家不要使用空属性，特别是在需要操作DOM属性做判断时

空的属性很容易造成难以察觉的错误

e.target.classList

e.className

img.src

...

但是...
空的id属性是不被允许的

...


...


...

❌ Error: An ID must not be the empty string.

到此这篇关于为什么vue中不建议使用空字符串作为className的文章就介绍到这了,更多相关vue 空字符串作为className内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！