<div id="app">
<p v-show="show"> You cane see me </p>
<p v-else> I am from else </p>
<template v-if="show">
<h2> Hi Template</h2>
<p> I am from template</p>
</template>
<button @click="show =! show"> Switch </button>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
show : true,
}
});
</script>
Note: v-show hide the contents whereas, v-if remove the contents. v-show do not work for the template.
Demo http://vue.toihid.com/section-3/vue-conditional-rendering-detach.php