07.v-if和v-show指令（重点）

一、v-if和v-show指令（重点）

v-if 和v-show都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制，v-if是对dom节点的控制。

```html

<div id="app">

        <!-- v-if指令的作用： 控制标签是否展示，不展示则删除-->

        <!--<div v-if="bool1">1111111</div>-->

        <!--<div style="display:none">2222222</div>-->

        <!--bool1的值为true 第一个盒子被保留，删除第二个盒子，

        为false的话，第2个盒子保留，删除第1个盒子-->

        <!--<div v-if="bool1">11111</div>-->

        <!--<div v-else>222222</div>-->

        <!--<div v-if="type=='a'">11111</div>-->

        <!--<div v-else-if="type=='b'">2222</div>-->

        <!--<div v-else-if="type=='c'">3333</div>-->

        <!--<div v-else>4444</div>-->

        <!--不会删除标签，根据bool1是true还是false决定盒子是显示还是隐藏(在控制display属性的值)-->

        <div v-show="bool1">v-show的用法</div>

 

    </div>

    <script>

        var vm = new Vue({

            el:"#app",

            data:{

                bool1: false,

                type: "z"

            }

        })

    </script>

```

点击收藏按钮案例：

```html

<!-- <button v-if="!collectStatus" @click="collectStatus=!collectStatus">点击收藏</button>

        <button v-else @click="collectStatus=!collectStatus">取消收藏</button> -->

<button v-show="!collectStatus" @click="collectStatus=!collectStatus">点击收藏</button>

<button v-show="collectStatus" @click="collectStatus=!collectStatus">取消收藏</button>

<script>

    var vm = new Vue({

        el:".tab_con",

        data:{

            num:1,

            collectStatus:false

        }

    })

</script>

```