<!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"> <script type="text/javascript" src="../js/vue.js"></script> <title>vue中的事件处理</title> </head> <body> <div id="root"> <!-- 事件回调需要配置再methods中,最终会在vm上 methods中的配置函数不要用箭头函数 mehods中配置的函数,都是vue管理的哈数,this指向vm或者组件实例对象 --> <h1>名字 :{{name}}</h1> <h1>地址 :{{address}}</h1> <!-- 事件指令v-on 有简写写法@ --> <button v-on:click="shouwInfo1"> 点我提示信息1(不传参)</button> <!-- 事件传参$event:这个为事件内置参数,后面可再加别的参数--> <button @click="shouwInfo2($event,66)"> 点我提示信息2(传参)</button> </div> <script> const vm=new Vue({ el:"#root", data:{ name:"xiao bai", address:"bei jing" }, methods:{ shouwInfo1(){ alert("你好") }, shouwInfo2($event,number){//这里接收参数 console.log(event,number); alert("你吃了吗") } } }) </script> </body> </html>
标签:事件处理,vue,number,提示信息,address,event From: https://www.cnblogs.com/xiaobaizitaibai/p/16835018.html