Conditional rendering in Vue

<div id="app"> <div v-if="show">{{message}}</div> <div v-else>Bye world</div> <div v-show="show">{{message}}</div> </div> <script> var vm = new Vue({el: '#app', data: { show: false, message:"hello world" } }) </script>Copy the code

Both v-if and V-show control the difference between whether a tag is displayed on the page and not: v-if controls whether a tag is present on the page and v-show controls whether a tag is displayed on the page

Examples of the use of the V-if and V-else directives:

<div id="app">
	<div v-if="show==='a'">
		This is A
	</div>
	<div v-else-if="show==='b'">
		This is B
	</div>
	<div v-else="show==='c'">
		This is C
	</div>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			show: 'a'
		}
	})
</script>
Copy the code