Vue:事件修飾符
阿新 • • 發佈:2021-11-08
常見得修飾符:
1.prevent:阻止預設事件觸發只觸發函式
2.stop:阻止冒泡:冒泡是會向父級跳轉的
3.once:函式只觸發一次
修飾符程式碼
<!DOCTYPE html> <html lang="en" xmlns:> <head> <meta charset="UTF-8"> <!-- 開發環境版本,包含了有幫助的命令列警告 --> <script src="js/vue.js"></script> <title>Title</title> </head> <body> <div id="firstVue"> <h1>函式修飾符</h1> <h2>prevent:阻止預設事件</h2> <a href="http://www.baidu.com" @click.prevent="showInfo">點選</a> <h2>stop:阻止冒泡:向上</h2> <div @click="showInfo"> <button @click.stop="showInfo">點我</button> </div> <h2>once:只觸發一次,再次執行不行</h2> <button @click.once="showInfo">點我</button> </div> </body> <script type="text/javascript"> //關閉生成提示 Vue.config.productionTip=false; let v=new Vue({ el:"#firstVue", data() { return { main:"VUE" } }, methods:{ showInfo(a,b){ alert(a+""+b); console.log(this); } } }) console.log(v) </script > </html>