vue.js - 动态 html 标签（使用变量）

Question

I was wondering if there was any way to dynamically set the tags of an html element. Eg

var element = "ol";

<{element}> some content </{element}>

Answer 1

Easier method is to just use component element, like this:

<component :is="elType">...</component>

Just set elType in data to whatever type of element you want it to be (ie div , h1 etc)

Demo: https://codesandbox.io/s/strange-kapitsa-zbtok?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

Answer 2

You may want to look into Render Function , jsx is also supported in Vue.js2.
Here's a simple example.

 var element = 'ol' Vue.component('custom', { render: function (createElement) { return createElement( element, this.$slots.default ) }, }) new Vue({ el: "#app" })

 <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <custom>abc</custom> </div>