Vue.js nodeName 变量

Question

我想创建一个模板，例如

<{{ headerType }}>{{ text }}</{{ headerType }}>

并绑定(bind)数据

{
  headerType: 'h3', // or h1, h2...
  text: 'Header text'
}

生成的模板未呈现为 HTML，因此我最终得到了 <h3>Header text</h3>作为我页面上的文本。

有什么好的方法可以做到这一点吗？

Answer 1

您可以使用具有渲染功能的组件。

Vue.component('heading', {
  props: {
    level: { type: String, required: true }
  },
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
    )
  },
});

var app = new Vue({
  el: '#app',
  data: {
    level: "1",
    text: 'hi'
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>


<div id="app">
    <select v-model="level"><option>1</option><option>2</option><option>3</option></select>
    <heading :level="level">
        {{text}}
    </heading>
</div>