.prevent事件修饰符 · vue

## .prevent修饰符 ``` ## 作用：停止超级链接等事件执行的 ## 如果一个超级连接，既有链接，又有事件，此时点击超级链接后会发生什么 ## 答案：先会执行事件的内容，然后会执行a默认的跳转事件如果一个超级链接，既有链接，又有事件，此时点击超级链接后会发生什么？ ``` <a href="http://www.baidu.com" @click.prevent="alertDialog">点击跳转到百度</a> ``` 答案是先会执行事件的内容，然后会执行a默认的跳转事件 ![](https://img.kancloud.cn/9f/2e/9f2eebb752bf4270c6f447ada694315f_889x279.png) ![](https://img.kancloud.cn/68/ad/68adcdec2b1e77747b3643e834ba1cb3_934x293.png) # 此时我们不需要a标签跳转到百度，执行完事件监听后就停止，通过.prevent修饰符阻止 ``` <a href="http://www.baidu.com" @click.prevent="alertDialog">点击跳转到百度</a> ``` ## 和stop修饰符一样，prevent也有原生的事件方法 ## event.preventDefault(); ## ![](https://img.kancloud.cn/ef/3c/ef3c310560686766a7fcb7ff70b2a5bf_2064x982.png) ## 自己写代码案例： <!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> <style> .outer{ width: 180px; height: 180px; background:gold; margin: 100px auto; padding:30px; border-radius: 50%; } .outer .center{ width: 120px; height: 120px; background: pink; padding: 30px; border-radius: 50%; } .outer .center .inner{ width:130px; height: 130px; background: cyan; border-radius: 50%; } </style> </head> <body> <div id="app"> <a href="http://www.baidu.com" @click.prevent="tiaozhuan">百度</a> </div> </body> <script src="vue/vue.js"></script> <script> var vue=new Vue({ el:"#app", methods:{ tiaozhuan(){ alert("这是超级链接") } , center(){ console.log("中间") }, inner(){ console.log("内层") } } }) </script> ``` </html>