vue.js - 在 Vue 模板中使用三元

Question

是否可以在 Vue 模板中使用三元条件返回 HTML，类似于 React 渲染函数？

<some-vue-component :someProp="someVal" />

这似乎不起作用:

// some-vue-component template file
{{someProp == true ? <h1>Hello</h1> : <h1>Bye</h1>}}

我需要使用 v-if ?

// some-vue-component template file
<div>
  <div v-if="someProp === true">
    <h1>Hello</h1>
  </div>
  <div v-else>
    <h1>Bye</h1>
  </div>
</div>

Answer 1

使用 {{ ... }} 输出所有内容将被转义，因此您不能包含 HTML 标记。

在您给出的示例中，您只需移动 <h1>外{{ ... }} :

<h1>{{ someProp ? 'Hello' : 'Bye' }}</h1>

更一般地，你会使用 v-if :

<h1 v-if="someProp">Hello</h1>
<h2 v-else>Bye</h2>

另请注意 v-if可以放在 <template>如果您不希望它向完成的 DOM 添加额外元素，请标记:

<template v-if="someProp">Hello</template>
<strong v-else>Bye</strong>

紧要关头还有 v-html但如果可能的话，你应该避免使用它。它允许您直接注入(inject) HTML，但这很少需要，因为模板可以处理绝大多数用例。