v-on事件绑定指令
Posted jiguiyan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v-on事件绑定指令相关的知识，希望对你有一定的参考价值。
v-on:事件绑定
v-on简写:@
绑定click事件时；
代码：
<script> window.onload= () =>{ let vm=new Vue({ el:‘#two‘, data:{ }, methods:{ show:function(){ alert("欢迎来到perfect*博客园！！！"); console.log(‘欢迎来到perfect*博客园！！！‘); }, } }) } </script> <body> <div id="two"> <button v-on:click="show">欢迎来到perfect*博客园</button> </div> </body>
执行click事件时进行数据的相加：
vue:
<script> window.onload= () =>{ let vm=new Vue({ el:‘#two‘, data:{ result:0 }, methods:{ add(a,b){ console.log("add"); console.log(this==vm); this.result=a+b; } } }) } </script>
html:
<div id="two">
<button v-on:click="add(1,2)">进行绑定数据相加的方法add()</button>
result:{{result}}
</div>
使用v-on的简写@时：
在vue中修改add方法即可：
add(a,b){ console.log("add"); console.log(this==vm); this.result +=a+b; }
使用v-on的简写@：
<button @click="add(1,2)">进行绑定数据相加的方法add()</button>
result:{{result}}
以上示例所有代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-on</title> 6 </head> 7 <script type="text/javascript" src="../js/vue.js" ></script> 8 <script> 9 window.onload= () =>{ 10 11 12 let vm=new Vue({ 13 el:‘#two‘, 14 data:{ 15 result:0 16 17 18 }, 19 methods:{ 20 21 // show:function(){ 22 // alert("欢迎来到perfect*博客园！！！"); 23 // console.log(‘欢迎来到perfect*博客园！！！‘); 24 // }, 25 26 add(a,b){ 27 console.log("add"); 28 console.log(this==vm); 29 this.result +=a+b; 30 31 } 32 } 33 }) 34 } 35 36 </script> 37 38 <body> 39 <div id="two"> 40 <!--<button v-on:click="show">欢迎来到perfect*博客园</button>--> 41 42 <button @click="add(1,2)">进行绑定数据相加的方法add()</button> 43 result:{{result}} 44 45 46 47 48 </div> 49 </body> 50 </html>
注意：在编写代码中如果使用简写，所有需要用到的地方都用简写哦！！！！
以上是关于v-on事件绑定指令的主要内容，如果未能解决你的问题，请参考以下文章