Vue.js - 带有三元运算符的 v-if vs v-text?

Question

如果你可以在v-text中使用三元，那么使用v-if有什么意义？

例如

<span v-text="data.value ? data.value : '-'"></span>

与以下相反：

<span v-if="data.value" v-text="data.value"></span>
<span v-else >-</span>

第一个使用较少的标记。

Answer 1

在我看来，使用三元是最好的解决方案。如果要显示不同的内容或其他组件，则应使用v-if。

<div class="searchResults" v-if="data.results.length">
<!-- show results -->
</div>
<div class="useful-links" v-else>
<!-- Show some useful links, useful information or even adds when no results are found -->
</div>

Answer 2

当您想要在 DOM 中添加或删除元素时使用v-if。 使用三元运算符甚至v-show会将元素保留在 DOM 上并切换是否显示内容。