初識Vue 3.0 —— v-if/v-else/v-else-if/v-show條件渲染

<h5>18.條件渲染</h5>
<div>
	<p>&lt;div v-if="awesome"&gt; &lt;/div&gt;</p>
	<pre>v-if/v-else/v-else-if </pre>
	<div id="vif">
		<select name="" v-model="types">
<option value="a">a</option><option value="b">b</option><option value="c">c</option>
		</select>
		<h1 v-if="types == 'a'">這裡是H1</h1><h2 v-if="types == 'b'">這裡是H2</h2><h3 v-if="types == 'c'">這裡是H3</h3>
	</div>
	<script type="text/javascript">
		//條件渲染 v-if/v-else/v-else-if
		const vif = {
data(){
	return{
		types:'a'
	}
}
		}
		Vue.createApp(vif).mount("#vif");
	</script>
	<pre>v-show</pre>
	<div id="vshow">
		<button @click="toggleShow">點選切換flag</button>
		<h3 v-show="ok">顯示出來了</h3>
	</div>
	<pre>注意：v-if是真的渲染和銷毀了；v-show隻是css控制的顯示隐藏，html還在</pre>
	<script type="text/javascript">
		//v-show
	const showbox = {
		data(){
return{
	ok:true
}
		},
		methods:{
toggleShow:function(){
	this.ok = !this.ok;
}
		}
	}
	Vue.createApp(showbox).mount("#vshow");
	</script>
</div>
		           

互動效果見：https://course.51qux.com/vue3-0-1

版權聲明：原創作品，允許轉載，轉載時請務必以超連結形式标明文章 原始出處 、作者資訊和本聲明。否則将追究法律責任。 轉載請注明來源： 初識Vue 3.0 —— v-if/v-else/v-else-if/v-show條件渲染 - Qui-Note