Vue - 表單修飾符

.lazy

在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 。
使用 lazy 修飾符，從而轉變為使用 change 事件進行同步

<div id="app">
	<input type="text" v-model.lazy="message">
	<p>{{message}}</p>
</div>
<script>
new Vue({
	el: '#app',
	data: {
		message: ""
	}
})
</script>

### .number 首先聲明這個`number`並不是限制用戶的輸入,而是將用戶輸入的數據嘗試綁定為 js 中的 `number `類型

舉個例子，如果用戶輸入300，data 中綁定的其實是'300'(string)，添加 number 指令后可以得到 300(number)的綁定結果。
而如果用戶輸入的不是數字，這個指令並不會產生任何效果。

<div id="app">
	<input type="text" v-model.number="message">
	<p>{{message}}</p>
	<input @click="assay" type="button" value="獲取"> 
</div>
<script>
new Vue({
	el: '#app',
	data: {
		message: ""
	},
	methods: {
		assay () {
			console.log(typeof this.message);
		}
	}
})
</script>

當不加number修飾符，輸入123456..數字的時候顯示的類型為string

.trim

過濾輸入的首尾空白字符

<div id="app">
	<input type="text" v-model.trim="message">
	<p>{{message}}</p>
	<input @click="assay" type="button" value="獲取"> 
</div>
<script>
new Vue({
	el: '#app',
	data: {
		message: ""
	},
	methods: {
		assay () {
			console.log(this.message);
		}
	}
})
</script>

> 當不添加 `trim` 修飾符