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>