v-on 指令

v- 開頭

1. v-on 兩種修飾符

1)事件修飾符(4種)
prevent,stop,capture,self

詳細(xì)說(shuō)明:
prevent: preventDefault() 阻止事件的默認(rèn)行為
stop: stopPropagation() 阻止事件冒泡
capture: 表示添加事件偵聽器時(shí)采用 capture 即捕獲模式

示例代碼:
<div v-on:click.capture='doThis'>...</div>

self: 只有當(dāng)事件作用在該元素本身(而不是子元素),觸發(fā)時(shí)觸發(fā)回調(diào)

示例代碼:
<div v-on:click.self='doSomething'>...</div>

2)按鍵修飾符(監(jiān)聽鍵盤事件)
記住 keyCode 比較困難,Vue.js 提供了別名

  • enter (keyCode: 13)
  • tab (keyCode: 9)
  • delete (keyCode: 8, 46)
  • esc (keyCode: 27)
  • space (keyCode: 32)
  • up (keyCode: 38)
  • dowm (keyCode: 40)
  • left (keyCode: 37)
  • right (keyCode: 39)
    示例:
只有在回車時(shí)調(diào)用 vm.submit()
<input v-on:keyup.13='submit'></input>
或:
<input v-on:keyup.enter='submit'></input>
縮寫語(yǔ)法:
<input @keyup.enter='submit'></input>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容