VUE中v-show与v-if区别

v-show

v-show通过设置布尔值来控制元素是否显示，如果turn显示fales隐藏，如果不是布尔值那么默认传布尔；通过设置元素的display来控制是否显示

    <button @click="fn">{{name1}}</button>
    <h1 v-show="mag">{{name}}</h1>

        vm = new Vue({
            el: "#app",
            data: {
                name1: "显示",
                name: "Hello world",
                mag: "trun"
            },
            methods: {
                fn() {
                    this.mag = !this.mag
                    this.name1 = this.mag ? "隐藏" : "显示"
                }
            }
        })

打开页面为显示Hello world 当我们点击按钮mag取反变成fales这是我们可以在控制台看到<h1 style="display: none;">Hello world</h1>加了一个display: none;的属性

v-if

v-if控制元素的显示隐藏；如果不是布尔，会默认转成布尔，fales直接删除元素

<button @click="fn">{{name1}}</button>
<h1 v-if="mag">{{name}}</h1>

 vm = new Vue({
            el: "#app",
            data: {
                name1: "显示",
                name: "Hello world",
                mag: "trun"
            },
            methods: {
                fn() {
                    this.mag = !this.mag
                    this.name1 = this.mag ? "隐藏" : "显示"
                }
            }
        })

打开页面为显示Hello world 当我们点击按钮mag取反变成fales这是我们可以在控制台看到是没有H1标签的