vue入门：（条件渲染）

• v-if
• v-show
• v-else

一、v-if:生成或者移出一个元素

 <div id="example">

     <button v-on:click="ifEvent">点击</button>

     <p v-if="greeting">hello</p>

 </div>

 <script>

     var vm = new Vue({

         el:'#example',

         data:{

             greeting:true

         },

         methods:{

             ifEvent(){

                 this.greeting = !this.greeting;

             }

         }

     });

 </script>

v-if表达式采用boolean值切换元素生成与删除，由于节点生成和删除会有较高的性能消耗，如果需要一次生成和删除多个元素时，可以采用<template>元素作为包装元素，在包装元素上使用v-if指令，最终的渲染结果不会包含包装元素，看示例：

 <div id="example">

     <button v-on:click="ifEvent">点击</button>

     <div>

         <template v-if="greeting">

             <h2>我是标题</h2>

             <p>我是简介</p>

             <p>我是内容</p>

         </template>

     </div>

 </div>

 <script>

     var vm = new Vue({

         el:'#example',

         data:{

             greeting:true

         },

         methods:{

             ifEvent(){

                 this.greeting = !this.greeting;

             }

         }

     });

 </script>

渲染结果：

由于v-if采用的是生成和删除节点，除非在一些购物车等特定应用场景下需要生成和删除节点，多数情况下的需求是只需要做显示和隐藏，所以这时候就没有必要删除节点，仅仅只需要对节点操作display样式实现即可，所以接下来介绍v-show指令。

二、v-show:展示或隐藏一个元素

 <div id="example">

     <button v-on:click="ifEvent">点击</button>

     <div v-show="greeting">hello</div>

 </div>

 <script>

     var vm = new Vue({

         el:'#example',

         data:{

             greeting:true

         },

         methods:{

             ifEvent(){

                 this.greeting = !this.greeting;

             }

         }

     });

 </script>

通过v-show来实现展示和隐藏，实际上就是操作元素的display的样式属性，比如示例中的div在被隐藏是的元素结构是：

然需要注意的是v-show不支持<template>语法。

vi-if是惰性的，如果在初始渲染时条件为假则什么都不做，只有在条件为真时才会编局部编译渲染，并且编译会被缓存起来。

既然有v-if的存在，v-else怎么能少呢？

三、v-else

v-else指令的语法含义跟javascript中的else一致，必须跟v-if配合使用，但不能与show一起使用。

 <div id="example">

     <button v-on:click="ifEvent">点击</button>

     <div v-if="greeting">我是会员</div>

     <div v-else="greeting">我是超级会员</div>

 </div>

 <script>

     var vm = new Vue({

         el:'#example',

         data:{

             greeting:true

         },

         methods:{

             ifEvent(){

                 this.greeting = !this.greeting;

             }

         }

     });

 </script>

如果是v-show也需要实现切换的话可以采用非值来实现，比如上面的v-else可以使用下面这样的方式来实现：

<div v-show="!greeting">我是超级会员</div>