Vue
HTML
<div id="app">
<button @click="toggle">
Toggle div or span element
</button>
<comp :type="span?'span':'div'"></comp>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
span {
color: blue
}
div {
color: red
}
Vue
Vue.component('comp',{
props:{type:String},
template:`
<component :is="type">
I am a {{type}}
</component>
`
})
new Vue({
el: "#app",
data: {
span: true
},
methods: {
toggle: function(){
this.span = !this.span;
}
}
})