基于条件的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 标签”

Answer 2

这就是render函数有用的地方。每当您的模板需要更高级的逻辑时，渲染函数都会使用 Javascript 及其所有逻辑流能力来生成模板，而不是 HTML 标签。您可以在此处阅读有关Vue 渲染函数的更多信息。

这是演示此示例的小提琴：

data() {

  return {

    someCondition: 1

  }

},

render(h){

  let tagType;

  if (this.someCondition === 0) {

    tagType = 'h1';

  } else if(this.someCondition === 1) {

    tagType = 'h2';

  }

  return h(tagType, null, 'MY TITLE');

}