Vue.js nodeNameの変数

Question

私は <h3>Header text</h3>を持つ終わるように、データ

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

結果のテンプレートはHTMLとしてレンダリングされていませんが、テンプレートなど

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

を作成してバインドしたい

私のページのテキストとして。

これを行うにはかなりの方法がありますか？

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を参照してください。