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>
