基于条件的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 :is="'h'+someCondition">MY TITLE</component>

您的“someCondition”可以定义为 props 或 data 属性，它的值可以从 1 到 6，以防您只使用“H 标签”