示例代码请访问我的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：

    
       {
   {num}}  
     +1
    
复制代码

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：

    
  
     显示隐藏  
     
  
     
    
复制代码