阻止冒泡
<!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> <div v-on:click="handle0" > <button v-on:click="handle1">点击</button> </div> </div> <script src="vue.js"></script> <script> var vue1 = new Vue({ el: '#app1', data:{ num:0 }, methods:{ handle0:function(){ this.num++; }, handle1:function(event){ // event.stopPropagation(); }, } }) </script> </body> </html>
将<button v-on:click="handle1">点击</button>改成 <button v-on:click.stop="handle1">点击</button> 就能等效上述阻止冒泡
阻止默认行为
<!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> <a href="http://www.baidu.com" v-on:click.prevent="handle1">百度</a> </div> </div> <script src="vue.js"></script> <script> var vue1 = new Vue({ el: '#app1', data:{ num:0 }, methods:{ handle1:function(event){ // event.preventDefault(); }, } }) </script> </body> </html>
按键修饰符
v-on:keyup.enter='handleSubmit'
v-on:keyup.delete='clearContent'