.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>