Vue---条件语句和循环语句（一）

条件语句

v-if

在Vue中，我们可以使用 v-if 指令实现条件判断功能。

you can saw me 

实例1：

	
you can saw me 

	

如果‘seen’为true显示，反之不显示。

在 template 中使用 v-if 指令：

案例2：

    
you now saw me
    

    

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

案例3

	

	  {{number}}大于0.5
	
	

	 {{number}}小于0.5
	

	

v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

案例4

    

      I  like  Sing
	
	

	  I  like  Sing
	
	

	  I  like  Knock code
	
	

	 I dont like anything ！
	

	

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

案例5

    

    

change login way

    

代码中切换  loginType  将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，  不会被替换掉——仅仅是替换了它的  placeholder 。 所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的  key  属性即可。

v-show

另一个用于根据条件展示元素的选项是  v-show  指令。用法大致一样：

案例6

    
Hello!

	

v-show 和v-if 可实现相同的功能，两者有什么区别呢？

v-if  和 v-show 的区别：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。