<h5>4.条件if：控制元素显示隐藏</h5>
<div class="show">
	<img v-if="seen" src="https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/1fabda50b9914134951dbc1caa791007.jpg" alt=""/>
	<button v-on:click="changeS">切换显示状态</button>
</div>
<pre>v-if条件判断，符合条件显示，否则不渲染</pre>
<script type="text/javascript">
	//条件判断，控制元素显示隐藏
	const shows={
		data(){
return{
	seen:true
}
		},
		methods:{
changeS(){
	this.seen = !this.seen;
}
		}
	}
	Vue.createApp(shows).mount("#app .show");
</script>

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

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。