Vue的修饰符
事件修饰符的指令:
.stop阻止冒泡
<a v-on:click.stop="handle">跳转</a>
.prevent阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
用法代码:
<body> <div id="app"> <div>{{num}}</div> <div v-on:click='handle0'> <!-- .stop阻止冒泡 --> <button v-on:click.stop='handle1'>点击1</button> </div> <div> <!-- .prevent阻止默认行为 --> <a href="http://www.baidu.com" v-on:click.prevent="handle2">百度</a> </div> </div> <script type="text/javascript" src="/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', // 选择ID标签 (元素的载位置) 把数据关联到页面的某个位置 data:{ num:0 }, methods:{ handle0:function() { this.num++; }, handle1:function(event) { // 传统方式阻止冒泡 // event.stopPropagation(); }, handle2:function(event) { // 原生JS阻止默认行为 // event.preventDefault(); } } }); </script> </body>