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

Question

如果可以在v-text中使用三元数，那么使用v-的意义何在？

例如

<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.lenght">
    <!-- 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

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