v-on · web前端

# v-on v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。一、使用绑定事件监听器，编写一个加分减分的程序 ~~~ <body> <div id="app"> 本场比赛得分： {{count}} <br/> <button v-on:click="jiafen">加分</button> <button v-on:click="jianfen">减分</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { count: 1 }, methods: { jiafen: function () { this.count++; }, jianfen: function () { this.count--; } } }) </script> ~~~ 我们的v-on 还有一种简单的写法，就是用@代替。 ~~~ <button @click="jianfen">减分</button> ~~~ 我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。绑定事件写法： ~~~ <body> <div id="app"> 本场比赛得分： {{count}} <br/> <button @click="jiafen">加分</button> <button v-on:click="jianfen">减分</button> <br> <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2"> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { count: 1, fenshu2: 1 }, methods: { jiafen: function () { this.count++; }, jianfen: function () { this.count--; }, onEnter: function () { this.count += parseInt(this.fenshu2); } } }) </script> ~~~ 你也可以根据键值表来定义键盘事件： ~~~ <input type="text" v-on:keyup.13="onEnter" v-model="fenshu2"> ~~~ 键盘码对应的数字 ![](https://box.kancloud.cn/679cc98103a00b762d04eeb34bec44f4_1512x486.png)