Vue 中事件修飾符

2021-10-06 21:47:57 字數 981 閱讀 8864

1.stop 阻止事件冒泡,當事件在自身消費後,不再傳遞--

>

"div1handler"

>

"button"

value

="stop" @click.stop=

"div2handler"

/>

<

/div>

2.prevent 阻止預設行為,比如a鏈結,響應事件之後不再響應預設事件--

>

"" @click.prevent>prevent<

/a>

3.capture 捕獲事件,事件冒泡之前的事件傳遞到自身,自身先響應事件,再向下傳遞--

>

"div1handler"

>

"button"

value

="capture" @click.stop=

"div2handler"

/>

<

/div>

4.self 只有事件發生在自身的時候才會響應,冒泡傳遞過來的事件不做響應--

>

"div1handler"

>

"button"

value

="self" @click.stop=

"div2handler"

/>

<

/div>

5.once 事件在自身只會響應一次,一次後繫結這個事件失效--

>

"div1handler"

>

"button"

value

="once" @click.stop=

"div2handler"

/>

<

/div>

var vm=

newvue(,

methods:

,div2handler()

}})

vue修飾符與事件修飾符

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

vue 事件修飾符

事件修飾符 在事件處理程式中呼叫event.preventdefault 或event.stoppropagation 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點,但更好的方式是 methods 只有純粹的資料邏輯,而不是去處理 dom 事件細節。為了解決這個問題,vue.js...

Vue事件修飾符

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