Vue.js nodeName的可變

Question

我想，這樣我最終<h3>Header text</h3>創建模板如

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

並綁定數據

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

所得模板不呈現爲HTML作爲我的網頁上的文字。

有沒有這樣做的漂亮方式？

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>

Answer 2

你可以像以下：

<div id="demo"> 
    <div v-html="'<' + headerType +'>' + text + '</' + headerType + '>'"></div> 
</div> 

您可以將在不同的方法或計算的屬性此字符串創建部爲好，更好的可讀性。

看到工作小提琴here。