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

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

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

一、Vue的修飾符是什么

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

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

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

left左鍵點擊、right右鍵點擊、middle中鍵點擊

<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設置自定義標簽屬性，避免暴露數據，防止污染HTML結構

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