I was wondering if there was any way to dynamically set the tags of an html element. E.g.
var element = "ol";
<{element}> some content </{element}>
I was wondering if there was any way to dynamically set the tags of an html element. E.g.
var element = "ol";
<{element}> some content </{element}>
Share
Improve this question
asked Oct 17, 2017 at 4:31
A. LA. L
12.7k29 gold badges98 silver badges179 bronze badges
2 Answers
Reset to default 5Easier method is to just use ponent
element, like this:
<ponent :is="elType">...</ponent>
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
You may want to look into Render Function, jsx
is also supported in Vue.js2.
Here's a simple example.
var element = 'ol'
Vue.ponent('custom', {
render: function (createElement) {
return createElement(
element,
this.$slots.default
)
},
})
new Vue({
el: "#app"
})
<script src="https://unpkg./vue/dist/vue.js"></script>
<div id="app">
<custom>abc</custom>
</div>