基础用法
模版写法：
1
| <input v-model="message">
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<input v-model="message" />
<div>{{ message }}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
message: '123'
}
}
})
</script>
</body>
</html>
|
在浏览器运行此文件后，在文本框输入内容时可以看到文本框下面的内容也在跟着变化，这是因为v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。
注意：
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
常见修饰符
| 修饰符 |
说明 |
| .lazy |
取代 input 监听 change 事件。 |
| .number |
输入字符串转为数字。 |
| .trim |
输入去掉首尾空格。 |
模版写法：
1
| <input v-model.trim="msg">
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<input v-model.trim="message" />
<div>{{ message }}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
message: '123'
}
}
})
</script>
</body>
</html>
|
在浏览器运行此文件后，可以看到在文本框的头和尾输入空格是无效的。