Vue.js
modifierare
Sök…
Introduktion
Det finns några ofta använda operationer som event.preventDefault() eller event.stopPropagation() inuti evenemangshanterare. Även om vi kan göra detta enkelt inom metoder, skulle det vara bättre om metoderna kan handla rent om datalogik snarare än att behöva ta itu med DOM-händelsedetaljer.
Event Modifiers
Vue tillhandahåller händelsemodifierare för v-on genom att anropa direktiv postfixer betecknade med en punkt.
-
.stop -
.prevent -
.capture -
.self -
.once
Till exempel:
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
Viktiga modifierare
När vi lyssnar på tangentbordshändelser måste vi ofta kontrollera om vanliga nyckelkoder. Att komma ihåg alla nyckelkoder är ett problem, så Vue tillhandahåller alias för de mest använda tangenterna:
-
.enter -
.tab -
.delete(fångar både "Delete" och "Backspace" -tangenter) -
.esc -
.space -
.up -
.down -
.left -
.right
Till exempel:
<input v-on:keyup.enter="submit">
Ingångsmodifierare
-
.trim
Om du vill användarens input som ska trimmas automatiskt kan du lägga till trim modifier dina v-model som förvaltas ingångar:
<input v-model.trim="msg">
-
.number
Om du vill att användarinmatning automatiskt ska skrivas ut som ett nummer kan du göra enligt följande:
<input v-model.number="age" type="number">
-
.lazy
Generellt synkroniserar v-model ingången med data efter varje inmatningshändelse, men du kan lägga till den lazy modifieraren för att istället synkronisera efter ändringshändelser:
<input v-model.lazy="msg" >