v-model表单绑定

前面讲解的插值、v-text、v-html都是单向绑定的, 如果需要双向绑定则使用v-model, 因为是双向绑定, 意味着可以在视图中修改数据。

基础用法

​ 在表单控件或者组件上创建双向绑定。它会根据控件类型自动选取正确的方法来更新元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="app">
		<input type="text" v-model="msg" />
		{{msg}}
	</div>
	
	<script type="text/javascript">
		const vm = {
			data() {
				return {
					msg: "hello world",
				}
			}
		}
		Vue.createApp(vm).mount('#app')
	</script>

提示：

​ v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值。它将始终将当前活动实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

修饰符

• v-model.lazy 只有在input输入框发生一个blur时才触发，也就是延迟同步到失去焦点时
• v-model.trim 将用户输入的前后的空格去掉
• v-model.number 将用户输入的字符串转换成number