Vue常用的修飾符的作用詳解

更新時間：2022年08月04日 15:51:00 作者：飯啊飯°

為了方便大家寫代碼，Vue 給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認(rèn)事件等等，這篇文章將給大家分享Vue 中的常用的修飾符

一、Vue的修飾符是什么

Vue中的修飾符分為以下五種：

修飾符	作用	使用
lazy	填完信息，光標(biāo)離開標(biāo)簽的時候，才會將值賦予給value	<input type="text" v-model.lazy="value">
trim	自動過濾用戶輸入的首空格字符，中間的空格不會過濾	<input type="text" v-model.trim="value">
number	自動將用戶輸入的值轉(zhuǎn)為數(shù)值類型，如果不能被parseFloat解析，會返回原來的值	<input v-model.number="age" type="number">

修飾符	作用	使用
stop	阻止了事件冒泡，相當(dāng)于調(diào)用了event.stopPropagation	<div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>//只輸出1
prevent	阻止了事件的默認(rèn)行為，相當(dāng)于調(diào)用了event.preventDefault方法	<form v-on:submit.prevent="onSubmit"></form>
once	綁定了事件以后只能觸發(fā)一次，第二次就不會觸發(fā)	<button @click.once="shout(1)">ok</button>

left左鍵點(diǎn)擊、right右鍵點(diǎn)擊、middle中鍵點(diǎn)擊

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

鍵盤修飾符用來修飾鍵盤事件（onkeyup,onkeydown）的，有如下：

// 只有按鍵為keyCode的時候才觸發(fā)
<input type="text" @keyup.keyCode="shout()">

還可以通過以下方式自定義一些全局的鍵盤碼別名

Vue.config.keyCodes.f2 = 113

props設(shè)置自定義標(biāo)簽屬性，避免暴露數(shù)據(jù)，防止污染HTML結(jié)構(gòu)

<input id="uid" title="title1" value="1" :index.prop="index">