请看下边的示例代码：

<div id="pp" >

    <p v-if="flag">我是由 v-if 控制的</p>
    <p v-show="flag">我是由 v-show控制的</p>
    <input type="button"  value="click"  @click="trigger">
</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el: '#pp',
                data: {
                   flag: true
                },
                methods:
                    {
                        trigger: function () {
                            this.flag=!this.flag;

                        }
                    }
            }
        )
    </script>

</div>

当我点击 click button 的时候，两个同时消失， 当再次点击的时候又出现了，

我们去页面元素看看他们同时消失后是什么情况

总结：

1. v-if 和 v-show 都可以 实现通过判断是否显示元素 ，
2. v-if 如果为false 就直接在元素内删除， 当为true 的时候创建
3. v-show 是添加一个属性 display：none ， 通过display 进行切换
4. 在性能 v-if 有较高的切换性能消耗
5. v-show 有较高的 初始渲染消耗
6. 根据以上性能特点， 如果元素涉及频繁的切换，最好不要使用v-if ， 如果元素可能永远也不会被显示出来被用户看到， 则推荐使用 v-if.