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` 修饰符