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

[chencl1986]

阅读更多系列文章请访问我的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>