Vue教程03：Vue事件、v-show、v-if指令

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

v-on指令

代碼參考：lesson03/01. v-on指令.html

經過v-on指令添加事件，如v-on:click="onClick(1)"，表示添加的是click事件，同時傳入1做爲參數。 v-on:click="onClick(1)"也能夠簡寫爲@click="onClick(1)"。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    num: 1
  },
  methods: {
    onClick(add) {
      this.num = this.num + add
    },
  }
})
複製代碼

HTML：

<div id="app">
  {{num}}
  <button v-on:click="onClick(1)">+1</button>
</div>
複製代碼

v-show、v-if指令

代碼參考：/lesson03/02. v-show、v-if指令.html

v-show經過控制樣式的display: none;和display: block;，實現顯示隱藏。 v-if是直接添加和刪除該元素，若是有的元素即便display: none;後仍是會對頁面效果有影響，建議使用v-if。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    show: true
  },
  methods: {
    onClick(add) {
      this.show = !this.show
    },
  }
})
複製代碼

HTML：

<div id="app">
  <button v-on:click="onClick()">顯示隱藏</button>
  <div class="box" v-show="show"></div>
  <div class="box2" v-if="show"></div>
</div>
複製代碼