如何将项目从 v-for 传递到 Vue.js 中的 function？

Question

我想做这样的事情：

<div v-for="section in sections">
  <h1 v-if="section.level === 1">
    ...
  </h1>
  <h2 v-else-if="section.level === 2">
    ...
  </h2>
  <h3 v-else-if="section.level === 3">
    ...
  </h3>
  <h4 v-else-if="section.level === 4">
    ...
  </h4>
  <h5 v-else-if="section.level === 5">
    ...
  </h5>
  <h6 v-else-if="section.level === 6">
    ...
  </h6>
</div>

但在我的例子中更简洁（这只是一个虚构的例子，真实世界的例子很难直接复制到这篇文章中），我想将这些调用抽象为函数，所以模板中没有真正的逻辑：

<div v-for="section in sections">
  <h1 v-if="isLevel(section, 1)">
    ...
  </h1>
  <h2 v-else-if="isLevel(section, 2)">
    ...
  </h2>
  <h3 v-else-if="isLevel(section, 3)">
    ...
  </h3>
  <h4 v-else-if="isLevel(section, 4)">
    ...
  </h4>
  <h5 v-else-if="isLevel(section, 5)">
    ...
  </h5>
  <h6 v-else-if="isLevel(section, 6)">
    ...
  </h6>
</div>

如何在 Vue.js 中做到这一点？ 想要的方式是什么？

我可以想到一种方法，即为每个 hx（伪代码）创建自定义组件：

<div v-for="section in sections">
  <MyHeader section="{{ section }}" />
</div>

new Vue({
  template: the MyHeader one,
  props: {
    section: true
  },
  methods: {
    isLevel1: function() {
      return this.$data.section.level === 1
    },
    isLevel2: function() {
      return this.$data.section.level === 2
    },
    ...
  }
})

<template name="MyHeader">
  <h1 v-if="isLevel1">
    ...
  </h1>
  <h2 v-else-if="isLevel2">
    ...
  </h2>
  <h3 v-else-if="isLevel3">
    ...
  </h3>
  <h4 v-else-if="isLevel4">
    ...
  </h4>
  <h5 v-else-if="isLevel5">
    ...
  </h5>
  <h6 v-else-if="isLevel6">
    ...
  </h6>
</template>

但是要求将它们变成自定义类是一种负担。 我也不想直接使用render function。 我试图在 Vue.js 中看到这样做的惯用方式，以及 Vue 的能力。 如果我把事情搞砸了，我是 Vue 的新手，很抱歉。

Answer 1

我认为您可以使用带有is prop 的component来做到这一点：

<div v-for="section in sections">
  <component :is="'h'+section.level" ></component>
</div>