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

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

创新互联建站专注于潮南企业网站建设,成都响应式网站建设,成都商城网站开发。潮南网站建设公司,为潮南等地区提供建站服务。全流程按需规划网站，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.

比较空字符串 '' 和 null

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

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

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

    • 这将渲染：
     
  •  

    • 如果 isBold 为 true ，它将渲染：
     

    (2) 方案2：使用 null /

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

       
 
 
 
          
  
  
  
    1.  
      2.     
  
  
  
    2.  
      3.     
  
  
  
    3. data() { 
      4.     
  
  
  
    4.   return { 
      5.     
  
  
  
    5.     isBold: false 
      6.     
  
  
  
    6.   } 
      7.     
  
  
  
    7. } 
      8.

    这将渲染：

       
 
 
 
          
  
  
  
    1.  
      2.     
  
  
  
    2.  
      3.

    如果 isBold 为 true ，它将渲染：

       
 
 
 
          
  
  
  
    1.  
      2.

    (3) 方案3：使用undefined /

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

       
 
 
 
          
  
  
  
    1.  
      2.     
  
  
  
    2.  
      3.     
  
  
  
    3.  
      4.     
  
  
  
    4.  
      5.

    false值

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

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

    使用对象语法重构

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

       
 
 
 
          
  
  
  
    1.  
      2.

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

       
 
 
 
          
  
  
  
    1.  
      2.

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

    使用&&设置class

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

       
 
 
 
          
  
  
  
    1.  
      2.

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

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

    例子1： isBold 等于 false /

       
 
 
 
          
  
  
  
    1.  
      2.

    这仍将渲染空类

       
 
 
 
          
  
  
  
    1.  
      2.

    例子2： isBold 等于 null /

       
 
 
 
          
  
  
  
    1.  
      2.

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

       
 
 
 
          
  
  
  
    1.  
      2.

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

    空类属性不好吗?

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

       
 
 
 
          
  
  
  
    1.  
      2.     
  
  
  
    2. ... 
      3.     
  
  
  
    3.  
      4.     
  
  
  
    4.  
      5.     
  
  
  
    5. ...
       
      6.

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

    但是...

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

       
 
 
 
          
  
  
  
    1.  
      2.     
  
  
  
    2. ... 
      3.     
  
  
  
    3.  
      4.     
  
  
  
    4.  
      5.     
  
  
  
    5. ... 
      6.     
  
  
  
    6.  
      7.     
  
  
  
    7.  
      8.     
  
  
  
    8. ... 
      9.

    错误：ID不能为空字符串。

    总结

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

    分享文章：如何避免在Vue中使用null作为class的空值
    本文来源：http://www.shufengxianlan.com/qtweb/news5/214455.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站策划知识

    各行业网站

    泸县网站建设　　 　网络营销推广　　 　网站排名　　 　虚拟主机　　 　重庆网站设计　　 　LED网站设计方案　　 　温江网站建设　　 　平山县网站建设　　 　瑞捷酒店用品　　 　温江网站建设　　 　贵安服务器托管　　 　成都移动托管　　 　成都小程序开发　　 　橡塑保温管　　 　雅安服务器托管　　 　软文平台　　 　网站维护报价　　 　成都网站制作　　 　南充电信机房托管　　 　成发金汇