五、Vue的条件渲染（v-if、v-show、v-for指令）

五、Vue的条件渲染（v-if、v-show、v-for指令）
v-if（控制DOM的存在与否）、v-show（控制DOM的显示与否）
v-if和v-show效果类似，都是控制内容是否显示出来，但是还是有区别的
举个例子：

    

        
hello world
        toggle
    
    

    

数据项中的show结果控制着模板中内容的显示，当show为false时，v-if = false,此div标签中的内容hello world将显示不出来，打开控制台，可以看到：

image.png

当show为false时，div标签的相关内容显示不出来，从控制台可以看出，div标签里的内容是直接被注释了，所以显示不出来；
但是当v-if改成v-show时，显示的结果是一样的，但是操作却不一样，打开控制台可以看到：

image.png

标签以及标签里的内容还是有的，但是div标签的display属性显示的是none，导致该标签内容显示不出来
总结一下v-if和v-show的共性和区别：

v-if和v-show都可以使标签的内容显示或者不显示，从结果上来看，两个指令的差别不是很大，但是v-if是直接把标签以及内容注释掉，v-show是利用属性将内容隐藏；利用这两个指令的区别，当使用的次数不多的时候，可以用v-if，当使用的次数较多的时候，用v-show可以提高效率。

有v-if指令，相对应的也就会有v-else指令，使用的时候可以解释为当满足if的条件时，执行if条件下的指令；不然就执行v-else条件下的指令。
例子如下：

    

        
{{message}}
        
Bye World
    

    

这就是当v-if为false时，将不执行v-if的内容，而是执行v-else的内容。
注意：v-if标签和v-else标签一定要在一起使用，两个标签之中不能添加其他的标签，否则会报错
还可以写更复杂的表达式，例子如下：

    

        
This is A
        

            This is B
        
        
This is others
    

       

这个例子中用到了v-if，v-else-if，v-else三个指令语句，当哪个符合条件时，哪个就会显示出来，实例里，data中显示的是show：b，这个符合v-else-if的指令，所以就执行This is B指令。
当然，这三个指令也是不可以分开的。

v-for指令（控制一组数据，来循环显示页面上的DOM结构）
可以理解为对于列表中的项进行依次展示，举个例子：

    

        
hello world
        toggle
        

            
{{item}}
        
    

    

此例中，Vue实例的数据项增添了列表list项，模板中增加了v-for指令，标签内容是item；

例子中的v-for指令规定了罗列list中的每一项（即item），结果如下：

image.png

故当有一个数据需要依次罗列的时候，v-for可以用的到，