Vue.js中的条件分支v-if

        在Vue中的条件分支用到的分别为 v-if = "表达式" , v-else-if = "表达式" , v-else ；其中表达式都是boolean类型的，只有true / false；

        与java中的if , else if , else语句非常相似。 可以进行嵌套。嵌套如下  v-if , v-else-if, v-else-if , v-else 可以在if后面有多个v-else-if。子标签也可以如此。

v-if = "表达式" ： 表示如果表达式为真，则显示该标签

v-else-if = "表达式" :必须在if后。如果if内的表达式为false,则判断else-if内的表达式。如果表达式为真，则显示改标签。也可以没有

v-else: 表示除if ,else if之外。上述两个都为false，则显示该标签。

        上述的v-if , v-else-if按照顺序来执行，如果有一个为true则显示其中一个的标签，如果有嵌套关系，则其他的将不再显示。

        代码示例:  提供一个输入框来获取输入的成绩，根据成绩的大小得出等级。使用vue中的v-model 。

	
		
		
		
	
	
		
			请输入你的成绩:
			90"> 优秀!
			80"> 良好! 
			70"> 中等! 
			60"> 及格! 		
			不及格! 	
		
		
	

        页面初始状态:

         我们任意修改输入框的值:

                v-if如果为false页面不渲染此标签，无此标签存在；

                v-show为false只是页面标签设置样式为display:none;

         代码示例:

	
		
		
		
	
	
		
			test	
			test
		
		
	

        页面无任何显示，查看开发者工具查看html代码。