VUE初阶段学习基础指令5——条件渲染V-IF 和 V-SHOW的使用

VUE初阶段学习基础指令5——条件渲染V-IF 和 V-SHOW的使用

<div id="app">
		<h1 v-if="order === 0">标题0 v-if</h1>
		<h1 v-else-if ="order===1">标题1 v-else-if</h1>
		<h1 v-else-if="order===2">标题2 v-else</h1>
		<h1 v-else-if="order===3">标题3 v-else</h1>
		<h1 v-else-if="order===4">标题4 v-else</h1>
		<button @click="chhangesum">切换</button>
		<h1 v-show="cs">现在是true</h1>
		<h1 v-show="!cs">现在是false</h1>
		<button @click="changeshow">切换show</button>
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data(){
					return{
						order : 0,
						cs : false
					}
				},
				methods:{
					chhangesum(){
						this.order = ++this.order % 5  /*0-4之间来回*/
						console.log('现在是order是',this.order)
					},
					changeshow(){
						this.cs = !this.cs
						console.log('cs现在是',this.cs)
					}
				}
			})
		</script>