如何呈现条件html

Question

我必须根据以下条件呈现一些html代码：

if (status == 'pending') {
// render <span class='pending'>pending</span>
} else {
// render <span class='complete'>complete</span>
}

我想要一个更好的方法。可以使用计算属性来呈现html吗？

Answer 1

如果你有一堆不同的状态，那么你可以在模板中有这样的东西：

<span v-if="status" :class="status">{{ status }}</span>

当status为true时，将显示跨度，并且类和内部文本将设置为状态值。

Answer 2

您可以查找v-if

<span v-if="status=='结束'">。。。。

https://v2.vuejs.org/v2/guide/conditional.html

Answer 3

您可以使用v-if指令：

<span class='pending' v-if="status === 'pending'">
pending
</span>
<span class='complete' v-else>
complete
</span>

查看更多详细信息：https://v2.vuejs.org/v2/guide/conditional.html