Vue之v-if与 v-show指令的异同

1、v-show：根据表达式的真假值来显示和隐藏元素

<div id="app">
        <p>hi</p>
        <p v-show="temp">小明</p> <!-- v-show根据显示或者隐藏 -->
        <p v-show="ok">贝贝</p>
    </div>
    <script>
        var vm = new Vue({  //创建vue实例
            el:'#app',   //el是vue实例的属性，用于和demo 进行绑定
            data:{   //data是vue 示例的属性，用于配置vue示例的数据
                temp:true,
                ok:true
            }
        })
        window.setInterval(function(){
            vm.ok = !vm.ok
        },1000)
    </script>

贝贝呈现每隔一秒弹出的效果

2、v-if和v-else：根据表达式的真假值来动态插入和移除元素

 <div id="app">
        <div v-if="role == '珊珊'">
             <h2>欢迎大美女</h2>
        </div>
        <div v-else-if = "role == 'lala'">
             <h2>欢迎小龙女</h2>
        </div>
        <div v-else> 
            <h2>欢迎猪猪侠</h2>
        </div>
    </div>
    </div>
    <script>
        new Vue({
                el:'#app',
                data:{
                    role:"lala",
                    role:'珊珊',
                    role:'jjg'
                }
            })
    </script>

隐藏上面的元素值，只显示最后一个元素值

v-if和v-show的区别

1、v-if 是创建和删除节点、v-show是隐藏和显示节点
2、v-if则是控制元素在dom树中的添加与删除，v-show是通过控制元素的CSS属性——display的值（none 或 block）从而达到实现控制元素的显示与隐藏。
3、v-if是惰性的，只有在条件为真时开始局部编译，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

两者的实现方式不同，决定了两者有不同的应用场景：

v-if由于是直接添加、删除dom元素，因此每次切换v-if的值都会导致dom树产生渲染消耗，所以v-if适用于不需要频繁更改显示状态的情况；比如说一刷新进入页面的状态最好使用v-if，消耗的性能小。

而v-show只是控制元素的display值，因此频繁切换v-show的取值也不会造成多次渲染，浪费资源，适用于需要频繁切换显示、隐藏状态的应用场景，比如说某个按钮经常会点击。