Javascript 如何在vue.js中绑定时高效地显示文本而不是空值？

在以下代码中，

站点

可以为空，但如果存在，则

公司

将不会为空。当

站点

为空且可以很好地缩放1000行时，如何有效地显示“-”

<tr v-for="obj in objs" :key="obj.id">
  <td>{{obj.site.company.name || "-"}}</td> <!-- does not work -->
</tr>

但是，如果可以内联完成，或者使用过滤器，则会更好。

尝试以下方法：

<tr v-for="obj in objs" :key="obj.id">
  <td v-if="obj.site !== null">{{obj.site.company.name}}</td>
  <td v-else>-</td>
</tr>

{{obj.site.company.name}
-

试试这个：

<tr v-for="obj in objs" :key="obj.id">
  <td v-if="obj.site !== null">{{obj.site.company.name}}</td>
  <td v-else>-</td>
</tr>

{{obj.site.company.name}
-

---

如果，我建议使用内联

。您应该检查站点是否
未定义
，以及公司是否
未定义
：

<tr v-for="obj in objs" :key="obj.id">
  <td>{{obj.site && obj.site.company ? obj.site.company.name : '-'}}</td>
</tr>


{{obj.site&&obj.site.company？obj.site.company.name:'-'}
如果

，我建议使用内联

。您应该检查站点是否
未定义
，以及公司是否
未定义
：

<tr v-for="obj in objs" :key="obj.id">
  <td>{{obj.site && obj.site.company ? obj.site.company.name : '-'}}</td>
</tr>


{{obj.site&&obj.site.company？obj.site.company.name:'-'}
如果站点不可用，您希望显示“-”，因此我这样做了：（数组的第一个元素为null）


let-app；
函数appInit（）{
app=新Vue({
el:“#应用程序”，
数据：{
obj：[
无效的
{站点：{公司：{名称：“test2”}}}，
{站点：{公司：{名称：“test3”}}
]
}
});
}
appInit（）


{{item&&item.site&&item.site.company&&item.site.company.name？item.site.company.name:“-”}


如果站点不可用，您希望显示“-”，因此我这样做了：（数组的第一个元素为null）


let-app；
函数appInit（）{
app=新Vue({
el:“#应用程序”，
数据：{
obj：[
无效的
{站点：{公司：{名称：“test2”}}}，
{站点：{公司：{名称：“test3”}}
]
}
});
}
appInit（）


{{item&&item.site&&item.site.company&&item.site.company.name？item.site.company.name:“-”}