快速了解Vue的修飾符

宣告：本文部分內容來自vue官方文件或網路。

. stop：阻止冒泡

. prevent：阻止預設事件的發生

. capture：捕獲冒泡

. self：將事件繫結到自身

. once：設定事件只能觸發一次

.passive：不阻止事件的預設行為

v-on:click.stop
="dothis"
>
a>
v-on:submit.prevent
="onsubmit"
>
form
>
v-on:click.stop.prevent
="dothat"
>
a>
v-on:submit.prevent
>
form
>
v-on:click.capture
="dothis"
>
...div
>
v-on:click.self
="dothat"
>
...div
>
v-on:click.once
="dothis"
>
a>
v-on:scroll.passive
="onscroll"
>
...div
>

.tab

.delete (捕獲「刪除」和「退格」鍵)

.esc

.space

.up.down

.left：

.right

.middle

.ctrl

.alt

.shift

.meta

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

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

vue.config.keycodes.f1 =
112

@keyup.enter
="submit"
>
或@keyup.13
="submit"
>
@keyup.page-down
="onpagedown"
>

.number：該修飾符用來將輸入內容自動轉換成數值。

.trim：該修飾符用來自動過濾字串前後的空字元

v-model.lazy
="msg"
>
v-model.number
="age"
type
="number"
>
v-model.trim
="msg"
>

vue修飾符與事件修飾符

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

vue的修飾符

在預設情況下，v model在每次input事件觸發後將輸入框的值與資料進行同步 你可以新增lazy修飾符，從而轉變為使用change事件進行同步 如果想自動將使用者的輸入值轉為數值型別，可以給v model新增number修飾符 這通常很有用，因為即使在type number 時，html 輸入元...

vue學習 vue修飾符

vue為v on或者 的方式提供了事件修飾符，通過點 表示的指令字尾來呼叫修飾符。如v on click.stop。stop 阻止事件向外冒泡 prevent 阻止預設行為 capture 將事件冒泡改為事件捕獲的方式 self 只會觸發自己的預設行為，也就是說只有在e.target e.curre...