事件 v-on:click=“handle"
@click="handle"
handle创建在methods里
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app1"> <div v-text='num'></div> <button v-on:click='num++'>点我</button><br> <button @click='handle'>点我2</button><br> </div> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app1', data: { num:0 }, methods: { handle: function() { this.num++ } } }) </script> </body> </html>
事件参数传递
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数， 如果事件绑定函数调用，那么事件对象必须作为最后一个参数$event显示传递 --> <div id = "app1"> <div v-text="num"></div> <button v-on:click="handle1">点击</button> <button @click="handle2(123,456,$event)">点击1</button> </div> <script src="vue.js"></script> <script> var vue1 = new Vue({ el: '#app1', data:{ num:0 }, methods:{ handle2:function(p,p1,event){ console.log(p,p1), console.log(event.target.innerHTML) this.num++ }, handle1:function(event){ console.log(event.target.innerHTML) } } }) </script> </body> </html>