如何在 vue.js 模板中显示空间而不是 undefined 和 null？答案

【问题标题】：How to display space instead undefined and null in vue.js template?如何在 vue.js 模板中显示空间而不是 undefined 和 null？
【发布时间】：2017-09-13 07:32:18
【问题描述】：

这是 Vue.js 模板

<strong>{{userdata.phone}}</strong>

当 userdata.phone == null 或 userdata.phone == undefined 时，我想显示空间。例如

<strong> {{ userdata.phone | !null | !undefined }} </strong>

有可能吗？在这种情况下怎么做？

<strong>{{userdata.location.city + userdata.location.state + userdata.location.country }}</strong>

userdata.locationi.city,state,country 可以为空或未定义

【问题讨论】：

您想显示城市、州和县还是哪个可用？

标签： javascript templates vue.js null undefined

【解决方案1】：

解决方案与default fallback for values in regular Javascript 相同。

<strong>{{ userdata.phone || " " }}</strong>

相同的解决方案适用于多个后备。

<strong>{{ userdata.location.city || userdata.location.state || userdata.location.country || " " }}</strong>

或者，如果涉及更复杂的逻辑或想要重用它，使用computed property 会很方便：

computed: {
  phone: function () {
    return this.userdata.phone || " ";
  }
}

如果您只针对支持 nullish coalescing 的浏览器或使用为您转换它的构建步骤，那通常更可取。

<strong>{{ userdata.phone ?? " " }}</strong>

【讨论】：

谢谢。在哪里可以找到相关文档？
这不是 Vue 固有的，它是标准的 Javascript。例如，您可以read about || on MDN。
好的，我编辑问题，在这种情况下，我该怎么做？

【解决方案2】：

了解 vuejs 中的模板语法很重要，只是 javascript。这意味着任何标准的 javascript 语句都可以在双花括号之间工作。

解决方案是利用 Javascript 的鸭子（动态）类型，并利用 null 或空字符串也解析为 false 值这一事实。

(userdata && userdata.phone) || '' 语句是标准的 javascript，其工作原理如下

如果userdata 为真（有值）并且userdata.phone 为真（不为空，长度大于零，还有一些注意事项），那么|| 运算符的这一边为真，所以返回这个值
否则|| 为假，使用此空字符串文字''

这可能会使您的模板变得混乱，您可能更愿意将它放在这样的计算属性中

<strong>{{userPhone}}</strong>

和

computed: {
    userPhone() {
        return (userdata && userdata.phone) || '';
    }
}

您几乎肯定会希望对该位置遵循计算属性策略。请注意，当用作字符串连接的一部分时，null 值将返回 'null'。

computed: {
    userLocation() {
        if (!userdata || !userdata.location) return '';
        return (userdata.location.city || '') + (userdata.location.state || '') + (userdata.location.country || '');
    }
}

更简洁的选择是使用数组的join 函数，它将忽略null 或undefined 值：

computed: {
    userLocation() {
        if (!userdata || !userdata.location) return '';
        return [userdata.location.city, userdata.location.state, userdata.location.country].join(' ');
    }
}

【讨论】：