vue 事件修飾符

2021-08-21 12:44:32 字數 669 閱讀 5412

事件修飾符

在事件處理程式中呼叫event.preventdefault()event.stoppropagation()是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點,但更好的方式是:methods 只有純粹的資料邏輯,而不是去處理 dom 事件細節。

為了解決這個問題, vue.js 為v-on提供了事件修飾符。通過由點(.)表示的指令字尾來呼叫修飾符。

......

按鍵修飾符

在監聽鍵盤事件時,我們經常需要監測常見的鍵值。 vue 允許為v-on在監聽鍵盤事件時新增按鍵修飾符:

記住所有的 keycode 比較困難,所以 vue 為最常用的按鍵提供了別名:

全部的按鍵別名:

可以通過全域性config.keycodes物件自定義按鍵修飾符別名:

// 可以使用 v-on:keyup.f1

vue.config.keycodes.f1 = 112

vue修飾符與事件修飾符

前言 在乙個控制項中使用修飾符 可以對控制項或操作做出一定的改變或者約束 修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...

Vue事件修飾符

也可以只設定事件名和修飾符而不傳入偵聽器,而且可以將修飾符串聯起來使用。例如,下面這個例子會阻止單擊事件沿dom樹向下傳遞,但只在第一次觸發時有效 除了上述事件修飾符,還有一些按鍵修飾符。它們用在鍵盤事件上,只有在特定按鍵按下時才會觸發事件。看下面這個例子 上面這個例子中,if語句中的的 只有當ke...

Vue 中事件修飾符

1.stop 阻止事件冒泡,當事件在自身消費後,不再傳遞 div1handler button value stop click.stop div2handler div 2.prevent 阻止預設行為,比如a鏈結,響應事件之後不再響應預設事件 click.prevent prevent a 3....