v-show和v-if的实例

先画两个球球，用两个div，加一个点击事情

<div id="app">
      <div v-show="isShow" class="ball"></div>
      <div v-if="isShow" class="ball ball"></div>
      <button @click="isShow=!isShow">toggle</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",//挂载节点
        data: {
          isShow: true
        }
      });
    </script>

写上球球样式

<style>
      .ball {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        display: block;
        margin: 3rem auto;
        background-color: orangered;
      }
    </style>

点击按钮，球球消失但是div没有消失，是v-show发挥作用。
点击按钮，球球消失并且div也消失，是v-if发挥作用。


总结： v-show 控制display ，v-if 直接删除标签