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>
复制代码