Vue 相当于 {{content?.body}} 插值答案

【问题标题】：Vue equivalent of {{content?.body}} interpolationVue 相当于 {{content?.body}} 插值
【发布时间】：2019-03-31 11:55:41
【问题描述】：

在 Angular 中，我们可以执行 {{content?.body}} 之类的操作，如果内容主体存在于您的数据中，它将呈现内容主体。

这在 Vue 中似乎不起作用。有没有办法实现这一点，或者我必须手动检查。

【问题讨论】：

【解决方案1】：

在 Vue 中，您可以使用 v-if 指令。例如；

 <div v-if="content.body">
   {{content.body}}
 </div>

更多信息请访问Vue official docs

【讨论】：

【解决方案2】：

vue.js 中不存在这种语法，根据 Vue.js 的创建者（see this post），它可能永远不会存在

但是你可以使用 lodash 中的 get 结合计算属性来模拟这种行为：

computed: {
   nestedProperty() {
     return get(this, 'here.is.my.nested.property')
   }
}

但最简单的方法可能是在模板中添加 v-if 指令以检查属性是否存在

【讨论】：

【解决方案3】：

我猜你正在寻找一种类似的方法来从 swift 或来自 kotlin 的安全呼叫运算符中选择 unwrap。 JS 或 Vue.js 都不支持这一点。

您最安全的选择是在整个链上使用 v-if

<span v-if=“content && content.body”>
  {{content.body}}
</span>

【讨论】：