基于条件的VueJS HTML元素类型

Question

在 Vue JS 中，我可以做到

<h1 v-if="someCondition">MY TITLE</h1>

有没有办法将元素类型基于某种条件？

例如，基于someCondition我希望我的标题是<h1>or <h2>。

我想我可以用

<template v-if="someCondition === 0">

  <h1>MY TITLE</h1>

</template>

<template v-if="someCondition === 1">

  <h2>MY TITLE</h2>

</template>

但是有没有更直接的写法？

Answer 1

<component&nbsp;:is="'h'+someCondition">MY&nbsp;TITLE</component>您的“someCondition”可以定义为 props 或 data 属性，它的值可以从 1 到 6，以防您只使用“H 标签”

Answer 2

这就是render函数有用的地方。每当您的模板需要更高级的逻辑时，渲染函数都会使用 Javascript 及其所有逻辑流能力来生成模板，而不是 HTML 标签。您可以在此处阅读有关Vue 渲染函数的更多信息。这是演示此示例的小提琴：data() {&nbsp; return {&nbsp; &nbsp; someCondition: 1&nbsp; }},render(h){&nbsp; let tagType;&nbsp; if (this.someCondition === 0) {&nbsp; &nbsp; tagType = 'h1';&nbsp; } else if(this.someCondition === 1) {&nbsp; &nbsp; tagType = 'h2';&nbsp; }&nbsp; return h(tagType, null, 'MY TITLE');}