Vue
HTML
<div id="app">
<button @click="toggle">
Toggle div or span element
</button>
<component :is="span?'comp-span':'comp-div'"></component>
</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-span',{
template:`
<span>
I am a span
</span>
`
})
Vue.component('comp-div',{
template:`
<div>
I am a div
</div>
`
})
new Vue({
el: "#app",
data: {
span: true
},
methods: {
toggle: function(){
this.span = !this.span;
}
}
})