文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何避免在Vue中使用null作为class的空值

2024-12-24 16:41

关注

使用 null 而不是传递一个空字符串,这可能会导致DOM输出中的一个空类。在你的三元操作符中,你可以返回 null。这将确保DOM中没有空类:

  1.  
  2. <div :class="isBold ? 'bold' : ''"> 
  3.  
  4.    
  5.  
  6. <div :class="isBold ? 'bold' : null"> 
  7.  

比较空字符串 '' 和 null

让我们深入研究上面的示例,然后更全面地了解正在发生的事情。

(1) 方案1:使用空字符串 '' /

我们使用三元运算符根据 isBold 是true还是falsy来有条件地设置适当的类。在此示例中,我们要说的是,如果 isBold 是 true 的,它将把该类设置为 bold。如果是 false 的,它将返回一个空字符串 “”。 :class 是 v-bind:class 的缩写。

  1. <div :class="isBold ? 'bold' : ''">div> 
  2.  
  3. data() { 
  4.   return { 
  5.     isBold: false 
  6.   } 

这将渲染:

  1. <div class>div> 
  2.  

如果 isBold 为 true ,它将渲染:

  1. <div class="bold">div> 

(2) 方案2:使用 null /

好吧,让我们看看如果将 null 分配为类的值会发生什么。

  1. <div :class="isBold ? 'bold' : null">div> 
  2.  
  3. data() { 
  4.   return { 
  5.     isBold: false 
  6.   } 

这将渲染:

  1. <div>div> 
  2.  

如果 isBold 为 true ,它将渲染:

  1. <div class="bold">div> 

(3) 方案3:使用undefined /

顺便说一句, undefined 也可以工作

  1. <div :class="isBold ? 'bold' : undefined">div> 
  2.  
  3. <div>div> 
  4.  

false值

提醒一下,这些是JavaScript中的false值。因此,如果 isBold 是这些值中的任何一个,它将返回三元运算符的false条件。

  1. false 
  2. undefined 
  3. null 
  4. NaN 
  5. "" or '' or `` (empty string) 

使用对象语法重构

在我的简单示例中,使用对象语法可能更好一些,如下所示:

  1. <div :class="{ bold: isBold }">div> 

我猜使用三元运算符的一个更好的例子是设置多个类。

  1. <div :class="isActive ? 'underline bold' : null">div> 

题外话:当我创作Demo时,我总是尽量让事情变得简单。其中一种方法就是尽可能地减少视觉噪音。因此,我的例子有时会过于简化,希望读者能够在不做太多处理的情况下立即掌握概念。《别让我思考》这本书给了我很大的启发。好了,言归正传,我们回到主菜上吧!

使用&&设置class

让我们探索另一种情况,看看是否可行。

  1. <div :class="isBold && 'bold'">div> 

&& 不仅是产生布尔值的逻辑运算符,它实际上可以产生一个值。因此,这就是说如果 isBold 为真,则返回 bold。但是,如果isBold 为假,则返回 isBold 的值。

强调最后一点——它将返回isBold的值。所以我们原来的空类问题仍然可以存在,取决于 isBold 的值是什么。我们来看看一些例子。

例子1: isBold 等于 false /

  1. <div :class="isBold && 'bold'">div> 

这仍将渲染空类

  1. <div class>div> 

例子2: isBold 等于 null /

  1. <div :class="isBold && 'bold'">div> 

 

由于 isBold 为 null,因此空类消失了 。

  1. <div>div> 

&& 并没有错——事实上它正在做它的工作,只是我们需要一个具体的返回值。在其他方面,我们不能渲染空类,我们必须传递 null 或 undefined。任何其他的假值都是不行的,因为这一点很容易被忽略,所以我更喜欢更明确的三元操作符或者简单的对象语法 。

空类属性不好吗?

我试着用W3C Markup Validation Service检查了一下,两种语法确实都通过了。

  1.  
  2. <div class>...div> 
  3.  
  4.  
  5. <div>...div> 

深入探讨HTML标准:空属性语法,似乎并不禁止空属性。

但是...

但是有效性不适用于 id,因为空ID被认为是无效的。

  1.  
  2. <div id>...div> 
  3.  
  4.  
  5. <div id="">...div> 
  6.  
  7.  
  8. <div id="name">...div> 

❌ 错误:ID不能为空字符串。

总结

既然空类被认为是有效的,规范也不反对,这一切都取决于你的风格选择。这是你的代码库,你可以决定如何处理它。如果你想保持你的HTML输出干净,那么你可以将 null 传递给你的Vue三元操作符。如果你觉得无所谓,那就算了。这里没有错误的答案,全看你喜欢什么了。

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯