Question

是否可以在视图模板中使用三元条件来返回HTML，类似于Reacts渲染功能？

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

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

This doesnt seem to work

编辑：我需要使用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可以在完成的DOM中添加额外的元素，可以将<template>放置在<template v-if="someProp">Hello</template> <strong v-else>Bye</strong>标记上：

v-html

在紧要关头还有java.lang.ClassCastException: io.appium.java_client.android.AndroidDriver cannot be cast to org.openqa.selenium.interactions.HasTouchScreen，但您应尽可能避免使用它。它使您可以直接注入HTML，但这几乎没有必要，因为模板可以处理绝大多数用例。

在Vue模板中使用三元

1 个答案: