1.使用事件的第一种方式：
<!DOCTYPE html> <html lang="zh"> <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='vue.min.js'></script> <title></title> <style type="text/css"> div{width: 200px;height: 200px;background-color: red;} </style> </head> <body> <div v-on:click="alert"></div> <script type="text/javascript"> new Vue( { el:'body', data:{ msg:'cyg&liwen' }, methods: { alert:function() { alert(this.msg); } } } ); </script> </body> </html>
解释：
代表methods代表使用的是vue的事件。
alert代表函数名
代表当前对象的msg属性.
效果：
2.使用事件的第二种方式：
<!DOCTYPE html> <html lang="zh"> <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></title> <script type="text/javascript" src='vue.min.js'></script> <style type="text/css"> div{width: 100px;height: 100px;background: black;} </style> </head> <body> <input type="button" name="" value="显示／隐藏" @click='changed'/> <div v-show='dis'></div> <script type="text/javascript"> new Vue({ el:'body', data:{ dis:true }, methods:{ changed:function(){ this.dis=!this.dis; } } }) </script> </body> </html>
解释：
第二种使用事件的方式：
神来之笔：
先显示true，然后点击就false，再点击就再相反就true.
效果：
