【Vue.js】007-条件渲染

一、v-if指令

1、概述

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 为true的时候被渲染；

可以使用 v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别；

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用，类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后；

用 key 管理可复用的元素：见https://cn.vuejs.org/v2/guide/conditional.html#用-key-管理可复用的元素

 

2、代码演示

	
		
		
		
	
	
		

			

				我有一栋别墅！
			
			
			

				我有一栋别墅！
			
			
			

				好吧，我没有别墅！
			
			
			
			
			
			
			

			改变登录方式
		
		
	

 

3、运行结果

 

二、v-show指令

 

三、v-if vs v-show

 

四、v-if 与 v-for 一起使用