v-on 事件监听器
生活随笔
收集整理的這篇文章主要介紹了
v-on 事件监听器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>v-on事件監聽器</title>
</head>
<body>
<h1>v-on 事件監聽器</h1>
<hr>
<div id="app">本場比賽得分： {{fenshu}} <br/><button v-on:click="jiafen">加分</button><button @click="jianfen">減分</button><br/><input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2"></div><script type="text/javascript">var app=new Vue({el:'#app',data:{fenshu:1,fenshu2:1},methods:{jiafen:function(){this.fenshu++;},jianfen:function(){this.fenshu--;},onEnter:function(){this.fenshu=this.fenshu+parseInt(this.fenshu2);}}})
</script>
</body>
</html>
我們除了綁定click之外，我們還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,現在我們增加一個輸入框，然后綁定回車事件，回車后把文本框里的值加到我們的count上。 <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2"> js:
onEnter:function(){this.fenshu=this.fenshu+parseInt(this.fenshu2);}
我們的v-on?還有一種簡單的寫法，就是用@代替。
<button @click="jianfen">減分</button>我們除了綁定click之外，我們還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,現在我們增加一個輸入框，然后綁定回車事件，回車后把文本框里的值加到我們的count上。 <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2"> js:
onEnter:function(){this.fenshu=this.fenshu+parseInt(this.fenshu2);}
轉載于:https://www.cnblogs.com/xu951128/p/7264018.html
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的v-on 事件监听器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 环信集成 2---基于环信Demo3.0
- 下一篇： Hadoop学习：Map/Reduce初