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 框內首尾輸入的空格

參考資料


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