vue指令:v-on的使用示例

v-on指令用法：

<button v-on:click="nums++">on带点击</button>

缩写:

<button @click="nums++">on带点击缩写</button>

v-on绑定函数名:

<button @click="addNums">on带点击函数名</button>

v-on绑定函数:

<button @click="addNums()">on带点击函数</button>

点击查看演示

示例代码:

<template>
<div class="mypage">
    <div class="top"><button class="prew" @click="goPrew()">上一页</button><button class="next" @click="goNext()">下一页</button></div>
    <div>第{{num}}页</div>
    <div>{{msg}}</div>
    <div>{{nums}}</div>
    <div><button v-on:click="nums++">on带点击</button></div>
    <div><button @click="nums++">on带点击缩写</button></div>
    <div><button @click="addNums">on带点击函数名</button></div>
    <div><button @click="addNums()">on带点击函数</button></div>
    <button @click="goHome()">返回第一页</button>
</div>
</template>
<script>
export default {
  name: 'mypage',
  data () {
    return {
      msg: '事件绑定',
      num: 7,
      nums: 0
    }
  },
  methods: {
    goHome () {
      this.$router.push('/')
    },
    goPrew () {
      this.$router.go(-1)
    },
    goNext () {
      this.$router.push('/')
    },
    addNums () {
      this.nums++
    }
  }
}
</script>
<style>
.tips{color:red;}
</style>