天天看點

vue中v-if和v-show差別

v-if是一個指令  判斷條件:當為true時顯示标簽

标簽會從html文檔中被移除或者插入

v-show

标簽還在html文檔中,隻是修改了标簽的顯示屬性(display:none)

<div id="app">
    <span v-if="isShow">我是一個span标簽</span>
    <span v-show="isShow">我是一個span标簽,使用v-show控制</span>
    <button v-on:click="toggleHandle">toggle</button>
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        isShow: true,
      },
      methods: {
        toggleHandle: function() {
          this.isShow = !this.isShow;
        },
      },
    })
  </script>
           

繼續閱讀