在使用v-model綁定單行文本框時(shí)细办，還能用以下修飾符來(lái)實(shí)現(xiàn)某些需求
v-model的常用修飾符有以下幾種
- lazy
- number
- trim
- debounce（在Vue2.0后被移除）
.lazy
在默認(rèn)情況下荚孵，v-model 在input事件中同步輸入框的值與數(shù)據(jù)诫咱。
如xxx鏈接所示休偶。
在添加了lazy之后换途，會(huì)把 oninput 事件改成 onchange 事件咬荷。
以下是核心代碼
<input type="text" v-model.lazy="msg">
以下是本例全部代碼
<template>
<div id="app">
<input type="text" v-model.lazy="msg">
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: ''
}
}
}
</script>
可以看到，input框輸入的內(nèi)容并不會(huì)實(shí)時(shí)更新到p標(biāo)簽里迷捧。因?yàn)檫@里使用了 lazy 修飾符织咧，把 oninput 事件改成 onchange 事件。
.number
number 修飾符會(huì)把 v-model 的值轉(zhuǎn)換成數(shù)值類(lèi)型漠秋。
以下是核心代碼
<input type="text" v-model.number="msg">
以下是本例全部代碼
<template>
<div id="app">
<input type="text" v-model.number="msg">
<p>{{msg}} : {{typeof(msg)}}</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: ''
}
}
}
</script>
需要注意的是笙蒙，如果輸入的第一個(gè)字是字符串，那number這個(gè)修飾符就不會(huì)生效庆锦。
輸入的第一個(gè)只能是數(shù)字或者小數(shù)點(diǎn)或者是正負(fù)號(hào)捅位。
從上圖可以看到，如果一開(kāi)始輸入的是數(shù)字，后面跟著字符串绿渣。再number的轉(zhuǎn)換后朝群，會(huì)把后面的字符串刪掉燕耿。
.trim
trim的作用是過(guò)濾用戶輸入時(shí)首尾的空格字符中符。
以下是核心代碼
<input type="text" v-model.trim="msg">
以下是本例全部代碼
<template>
<div id="app">
<input type="text" v-model.trim="msg">
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: ''
}
},
watch: {
msg(newValue) {
console.log(newValue);
}
}
}
</script>
這里用了 watch 來(lái)監(jiān)聽(tīng) msg ，每當(dāng) msg 的值有更新誉帅，就會(huì)在控制臺(tái)輸出更新后的值淀散。
從控制臺(tái)可以看到，我們?cè)谥档那昂筝斎肟崭裱料牵ㄟ^(guò) trim 轉(zhuǎn)換后得到的新值首位的空格都是被清除了档插。
.debounce
設(shè)置一個(gè)最小的延時(shí)，在每次輸入之后延時(shí)同步輸入框的值到Model中亚再。如果每次更新都要進(jìn)行高耗操作（例如郭膛，在輸入提示中的AJAX請(qǐng)求）時(shí)，它比較有用氛悬。
但實(shí)際上则剃，這是控制了狀態(tài)更新的頻率，而不是控制高耗時(shí)任務(wù)本身如捅。這是個(gè)微小的差別棍现，但是會(huì)隨著應(yīng)用增長(zhǎng)而顯現(xiàn)出局限性。
所以在Vue2.0之后就被移除了镜遣。
<input type="text" v-model="msg" debounce="500">
延時(shí)500毫秒己肮。
如果想用這個(gè)修飾符，就需要使用Vue2.0之前的版本悲关。
