v-show指令和v-if指令的区别

v-show指令和v-if指令的区别

区别：
v-show指令：根据表达式的真假，切换元素的显示和隐藏(v-show指令操作的是标签元素的display属性)

v-if="表达式"

v-if指令：根据表达式的真假，切换元素的显示和隐藏(v-if指令操作的是DOM元素)

v-show="表达式"

话不多说，直接看示例代码

<div id="app">
        <input type="button" value="v-if显示" @click="changShow">
        <p v-if="isShow">v-if指令：点击按钮后对我进行显示或者隐藏</p>
        <p v-show="isShow">v-show指令：点击按钮后对我进行显示或者隐藏</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false
            },
            methods: {
                changShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

F12检查元素
点击按钮显示内容，可以看到v-if和v-show指令下的内容正常显示

点击按钮隐藏内容，可以看到v-show指令仅仅是改变了标签的display属性，即display：none;而v-if指令则是改变了整个标签元素，大白话就是让对应的标签元素消失。

从上面的小例子不难看出二者的区别，如有错误之处，望各位指出。