Vue中如何避免动态绑定类中出现空类？

时间：2023-03-12 07:02:29 科技观察

传递空字符串，这可能会导致DOM输出中出现空类。在三元运算符中，我们可以返回“null”，这确保了DOM中没有空类🌟选项1：使用空string''我们使用三元运算符根据isBold是真还是假来有条件地设置适当的类。在下面的示例中，如果isBold为真，则该类设置为粗体。如果为false，它将返回一个空字符串''。html

jsdata(){return{isBold:false}}最终的渲染看起来像：

如果isBold为真，会被渲染为：

方案二：使用null接下来，我们看看如果给class赋null值会发生什么。html

jsdata(){return{isBold:false}}最终的效果图是这样的：

如果isBold为true,会被渲染为:方案三:使用undefined顺便说一句,undefined也可以工作👍

假值以下是JS中的假值。因此，如果isBold是这些值中的任何一个，它将返回三元运算符的假情况。falseundefinednullNaN0""or''or``(emptystring)Refactoringusingobjectsyntax对于上面的例子，最好使用对象语法：使用三元A操作员更好的场景是设置多个类。使用&&设置class让我们看看另一个场景，看看它是否有效。&&不仅仅是一个逻辑运算符，它实际上可以产生一个值。因此，如果isBold为真，则返回粗体。但是，如果isBold为假，则返回isBold的值。强调最后一点——它将返回isBold的值。因此，根据isBold的值，我们原来的空类问题仍然存在。让我们看一些例子。示例A：isBold等于false这仍然呈现一个空类😱示例B：isBold等于null因为isBold为null，所以空类消失了。

&&是对的——真的，它只是完成了它的工作。只是我们需要一个特定的返回值。另一方面，我们不能渲染空类，我们必须传递null或undefined。除了这两个之外的任何其他虚假值都不起作用。因为这很容易被忽略，所以我更喜欢更明确的三元运算符，或者只是对象语法👍空类属性有错吗？我尝试使用W3C标记验证服务进行检查，两种语法都通过了。...

...

深挖HTML标准：HTMLStandard:Emptyattributesyntax，它似乎不允许使用空属性。但是...但是这种有效性不适用于id。因为空id被认为是无效的。.........错误：ID不能为空字符串。总结由于空类被认为是有效的，并且规范没有反对它，所以这完全取决于您的选择。这是您的代码库，您可以决定如何处理它。如果你想保持你的HTML输出干净，你可以将null传递给Vue三元运算符。如果对你无所谓，那就算了。这里没有正确答案，这完全取决于您的喜好。作者：SamanthaMing译者：FrontendXiaozhi来源：medium原文：https://www.samanthaming.com/tidbits/96-vue-use-null-for-class/》，可通过以下二维码关注。转载本文请联系大千世界公众号。

上一篇：不公平的竞争并不少见，8个不得不知的国外审查案例

下一篇：MicrosoftAzure再次升级，EventGrid

Vue中如何避免动态绑定类中出现空类？相关文章