vue中v-if和v-show的区别

v-if :适用于切换频率较低的场景, 特点:不展示DOM元素直接被移除注意：v-if可以和v-else-if,v-else一起使用，但要求结构不能被打断

v-show: 适用于切换频率较高的场景 特点：不展示的DOM元素未备移除，仅仅是使用样式隐藏掉

<div id="root">
        <!--平凡切换的使用v-show ，效率高-->
        <!--使用v-show做条件渲染-->
        <div v-show="show_one">邓紫棋</div>
        <button @click="show_one=!show_one">v-show切换</button>

        <!--使用v-if做条件渲染-->
        <div v-if="if_one">邓紫棋</div>
        <button @click="if_one=!if_one">v-if切换</button>

        <!--当n变化时，展示不同的div-->
        <div>{{n}}</div>
        <button @click="nname">点击</button>

        <div v-if="n===0">ang</div>
        <div v-else-if="n===1">react</div>
        <div v-else-if="n===2">vue</div>
        <div v-else>啥都不是</div>
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                name: "邓紫棋",
                show_one: false,
                if_one: false,
                n: "0"
            },
            methods: {
                nname() {
                    if (this.n < 5) {
                        this.n++
                    }

                }
            },

        })
    </script>