当前位置: 首页 > 科技观察

如何避免在Vue中将null用作类的空值

时间:2023-03-21 20:40:32 科技观察

使用null而不是传递空字符串,这可能会导致DOM输出中出现空类。在您的三元运算符中,您可以返回null。这将确保DOM中没有空类:比较空字符串''和null让我们深入研究上面的例子,然后得到一个更完整的画面发生了什么事。(1)场景一:使用空字符串''/我们使用三元运算符,根据isBold是true还是falsy,有条件地设置合适的类。在这个例子中,我们说如果isBold为真,它会将类设置为粗体。如果为假,它将返回一个空字符串“”。:class是v-bind:class的缩写。

data(){return{isBold:false}}这将呈现:
如果isBold为真,它会渲染:
(2)场景2:使用null/那么,让我们看看如果我们将null作为类的值赋值会发生什么。
data(){return{isBold:false}}这将呈现:
如果isBold为true,它将呈现:(3)场景3:使用undefined/btw,undefined也可以
假值提醒,这些是JavaScript中的假值。因此,如果isBold是这些值中的任何一个,它将返回三元运算符的假条件。falseundefinednullNaN0""or''or``(emptystring)使用对象语法重构在我的简单示例中,使用这样的对象语法可能更好:我猜使用三元运算符的一个更好的例子是设置多个类。题外话:当我创建演示时,我总是尽量让事情变得简单。一种方法是尽可能减少视觉噪音。因此,我的示例有时过于简单化,希望读者无需做太多处理即可立即掌握概念。《别让我思考》这本书给了我很大的启发。好了,废话不多说,让我们回归正题吧!使用&&设置类让我们探讨另一个案例,看看它是否有效。&&不仅仅是一个产生布尔值的逻辑运算符,它实际上可以产生一个值。所以,这意味着如果isBold为真,则返回粗体。但是,如果isBold为false,则返回isBold的值。强调最后一点——它将返回isBold的值。所以我们原来的空类问题还能不能存在,就看isBold的值是多少了。让我们看一些例子。示例1:isBold等于false/这仍然会呈现空类示例2:isBold等于null/由于isBold为null,因此空类消失了。
&&没有任何问题-事实上它正在做它的工作,只是我们需要一个具体的返回值。在其他情况下,我们不能呈现空类,我们必须传递null或undefined。任何其他假值都是不可能的,因为这很容易被忽略,所以我更喜欢更明确的三元运算符或简单的对象语法。空类属性不好吗?我尝试使用W3C标记验证服务进行检查,两种语法都通过了。...
...
深挖HTML标准:Empty属性语法,好像是空的属性。但是...但是有效性不适用于id,因为空id被认为是无效的。.........?错误:ID不能为空字符串。总结由于空类被认为是有效的并且规范不反对,所以这完全取决于您的样式选择。这是您的代码库,您可以决定如何处理它。如果你想保持你的HTML输出干净,那么你可以将null传递给你的Vue三元运算符。如果对你无所谓,那就算了。这里没有错误的答案,这完全取决于你喜欢什么。