Vue 的幾個 V-model 修飾符:lazy、number、trim

v-model 可透過一些修飾符,來去對 input 進行限制與效果。

lazy:轉為 change 事件後同步

編輯資料時不會一起更動值,等到輸入完畢離開 input 後才會變動

1
2
3
4
5
<!-- HTML -->
<div id="app">
<input type="text" v-model.lazy="message">
{{ message }}
</div>

number:改變 input 資料型別 typeof

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- HTML -->
<div id="app">
<input type="text" v-model="message">
<input type="text" v-model.number="message">
<input type="number" v-model="message">
<input type="number" v-model.number="message">
{{ message }}
{{ typeof message }}
</div>

<script>
// 假設值為 123456:
/*
欄位一:string
欄位二:number
欄位三:string
欄位四:number
*/
</script>
  • {{ typeof 資料名稱 }} 可取得該筆資料的資料型別
  • 加上修飾符 .number 才能改變其資料型態為 number,否則儘管輸入數字也會是 string

trim:去掉頭尾空格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- HTML -->
<div id="app">
<input type="text" v-model="message">
<input type="text" v-model.trim="message">
首{{ message }}尾
</div>

<script>
// 假設值為 " 哈囉 ":
/*
欄位一:首 哈囉 尾
欄位二:首哈囉尾
*/
</script>
  • trim 能夠自動去除用戶在 input 框內首尾輸入的空格

參考資料


希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)

本站所有文章除特別聲明外,均採用 BY-NC-SA 許可協議。轉載請註明出處!