初识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