Vue之事件處理和事件修飾符詳解
阿新 • • 發佈:2021-11-22
<div id="root"> <h2>{{name}},加油!</h2> <!-- 阻止預設事件 --> <a @click.prevent="showInfo" href="https:www.baidu.com">點我提示資訊</a> <!-- 阻止事件冒泡 --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">點我提示資訊</button> </div> <!-- 事件只觸發一次 --> <button @click.once="showInfo">點我提示資訊</button> <!-- 使用事件捕獲模式 --> 客棧<div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> http://www.cppcns.com <!-- 只有event.target是當前操作的元素時才觸發事件 --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">點我提示資訊</button> </div> </div> <script> .config.productionTip = false; new Vue({ el: '#root',TuardwgQdata() { return { name: '張三' } },methods: { showInfo(e) { // e.preventDefault(); alert('王同學,你好!') },showMsg(msg) { console.log(msg); } } }); </script> http://www.cppcns.com
總結
本篇文章就到這裡了,希望能夠給你帶來幫助,也希望您能夠多多關注我們的更多內容!