Conditional rendering with v-if

by Megi93

HTML

<div id="app">
	<!-- v-show, when is true show, when is false don't show -->
	<p v-if="show">You can see me!<span>Hello!</span></p>
	<!-- v-else will automaticly refer to v-if and know we toggle between v-if and v-else -->
	<p v-else>Now you see me!</p>
	<template v-if="show">
		<h1>Heading</h1>
		<p>Inside a template</p>
	</template>
	<!-- alternativa za v-if, samo krije sadrzaj sa display: none kad ga nema -->
	<p v-show="show">Do you also see me?</p>
	<!-- toggle on click show/hide first <p> -->
	<button @click="show = !show">Switch</button>
</div>

JavaScript

new Vue ({
	el: '#app',
	data: {
		show: true
	}
})