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)