<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>
		<button @click="show =! show"> Switch  </button>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			show : true,

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

By toihid

Leave a Reply