在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦:
<input
:value="text"
@input="event => text = event.target.value">
v-model 指令帮我们简化了这一步骤:
<input v-model="text">
另外,v-model 还可以用于各种不同类型的输入,<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合:
文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件;
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件;
<select> 会绑定 value property 并侦听 change 事件:
注意:v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。
基本用法
文本
<template>
<div class="activeClass">
<input v-model="name" placeholder="请输入内容"/>
<span>{{name}}</span>
</div>
</template>
<script lang="ts">
export default {
data() {
return {
tips:'请输入内容',
name: 'Hello,sslcode'
}
}
}
</script>
<style>
.activeClass{
color: red;
font-weight: bold;
border: solid 1px red;
}
</style>
效果:
![](data:image/png;base64,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)
注意:
对于需要使用 IME 的语言 (中文,日文和韩文等),你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新,请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
效果:
![](data:image/png;base64,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)
注意:在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代:
<!-- 错误 -->
<textarea>{{ text }}</textarea>
<!-- 正确 -->
<textarea v-model="text"></textarea>
复选框
单一的复选框,绑定布尔类型值:
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
效果:
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOQAAABhCAYAAADGKg3mAAAFoElEQVR4nO3dPWgbZwCH8f+dpKyZakwhIBwv3YShCs4U2kWDPRhMNtNgQiEkhmQThkwG4U4NBBNwTCl4CwEHtGgJLZRWxIWgzYsrBF6MvAbyZd11UE45fdzppJyub63nB8I6+U55Mzy8d6/OyHJd19UXiuEtAEhKj3MQAQKTETlIIgQmb2iQUUIkViAeoUEGhUaAwGQMDHKUEB3HiXdEwBTrC3JQdP7XXNft2w47FkB0XUGGxeiFGLQd9h4Aool0DemPz3EcWZYl27Y7DwDx6AQZNNP5Q3QcR+l0Wun0WB9fAhgiLUWPMZPJKJVKJT9KYEr0nW8OWsBxHEepVIoYgQmzgxZhHMfpxChJmUwmyXEBU6lrhvSfqno/vdkRwOQFLpH6V1YJEkhGJ8jehRz/cz7aAJIxdIbk1jggOQOD5G4b4L8xcFHHez7o1jgAk2NLzIiAKVitAQwSeqcOgGQFLupwDQkkj1NWwCAECRiEIAGDECRgEIIEDEKQgEEIEjAIQQIGIUjAIAQJGIQgAYMQJGAQggQMQpCAQQgSMAhBAgYhSMAgRnyv3OnpqQ4ODtRoNIbum81mtbKyotnZ2QRGBiTLchzHDfr6uVarpfPzc12+fHmig3jy5IlyuZwWFxeH7lutVlWr1XTnzp2h+75+XNDqvqTrd/Xq0bK+irK/tlXfyEUbOBAzI05ZG41GpBglaXFxMdJMelZ+oNV/7urVYUX1CDECJjAiyEk4aRxJV68QIv5XLmyQwP/RBQyyplL+07XjflFz+YLWy6eS2qexc/lC5+G9HqhZ1rpv/7n7ZZ35ft37fqXaxP5TmBJGrLLGK6fNw4oKfQs0NT1t/KD64aftZlnrS7dUulLR5sA1nJpKSzua363ol5wknerZ4787vz0rP9C1l9/p1eHP7dPiZlnrSwWVdoPeDxjuAs6QQXLa9K+eznyrwnXp+CRglmye6FjfaP5r74VZ3dzwFodqerolbW/6FotmlnVvTdr7g2kS47uAM2SYmkr5ovZ8r9z4PmDXmWXdW9vR6lJBxbWej0KaJzrWkfaWCir2HrcW74gxXaYmyLPyA13bOtLt3Yrq3ino/VuqhByzsFFRfaO931xeUleYy3p+eFcLEx85psmUnLKe6reXR7rx8Ncxru9mdfNRRfXdZWn/T72WpJkrmldZFc5OETMjgsxms6pWq5H2rVarymazI/4Ls5q/Kv3e+Hy9eFb+ScW/Qg5pllUKXIXNqbAm7f240w608547etYccWiAjxGnrCsrKzo4ONCLFy+G7uvdyzqqhY1t3c4XNbff3r7xcFvb14uhp6zHW7c0t+VtdZ+iLmxU9FwFrebLnw9Y21Z9eeShAR1G3MsKoM2IU1YAbQQJGIQgAYMQJGAQggQMQpCAQQgSMAhBAgYhSMAgBAkYhCABgxAkYBCCBAxCkIBBCBIwCEECBiFIwCAECRiEIAGDECRgkIFBWpbV9QCQjL4gBwXYarUSGQww7QJPWf0z5Pn5eZJjAqaWLfXPiv5ty7L04cOHZEcFTKmuGbI3TNu2Zdu2XNfV+/fvEx0YMI1CF3X8z9++fauPHz8mOjhg2kS6hkylUkqlUnrz5o3evXuX5PiAqWI5juN6G73f8eE9Wq1W1/d9WJalS5cuKZPJKJ024vt6gAshMEjvp+M4ktQVpffwfzlP73sAGF1XkFJ4lP4Q/T97jwUwnrRlWQND8r9u27Ycx5Ft212/l0SQQIwst63rRf+2d1o66LnUHWTvsQBGk5a6Z8Pe7UE3DbiuG3iPK0EC47P80+OwmTLotaBjAIwm9DOL3pkybGYE8OWs3gvIKLNe0CzI7Ah8mb4gpdGCI0IgPgOD9DATAskKDVKKFh+BAvEYGqSH6IDJi3xnuH91lTiByRjrTzV6P/ogUCAesfztFJ9NAvH4F+AoCGpcsXUlAAAAAElFTkSuQmCC)
我们也可以将多个复选框绑定到同一个数组或集合的值:
js
export default {
data() {
return {
checkedNames: []
}
}
}
template
<div>Checked names: {{ checkedNames }}</div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
效果:
![](data:image/png;base64,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)
单选按钮
<div>Picked: {{ picked }}</div>
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
效果:
![](data:image/png;base64,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)
选择器
单个选择器的示例如下:
<div>Selected: {{ selected }}</div>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
效果:
![](data:image/png;base64,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)
注意:如果 v-model 表达式的初始值不匹配任何一个选择项,<select> 元素会渲染成一个“未选择”的状态。在 iOS 上,这将导致用户无法选择第一项,因为 iOS 在这种情况下不会触发一个 change 事件。因此,我们建议提供一个空值的禁用选项,如上面的例子所示。
多选 (值绑定到一个数组):
<div>Selected: {{ selected }}</div>
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
效果:
![](data:image/png;base64,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)
选择器的选项可以使用 v-for 动态渲染:
export default {
data() {
return {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
}
}
template
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<div>Selected: {{ selected }}</div>
值绑定
对于单选按钮,复选框和选择器选项,v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值):
<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外,使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。
复选框
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no" />
true-value 和 false-value 是 Vue 特有的 attributes,仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes',取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值:
<input
type="checkbox"
v-model="toggle"
:true-value="dynamicTrueValue"
:false-value="dynamicFalseValue" />
提示:true-value 和 false-value attributes 不会影响 value attribute,因为浏览器在表单提交时,并不会包含未选择的复选框。为了保证这两个值 (例如:“yes”和“no”) 的其中之一被表单提交,请使用单选按钮作为替代。
单选按钮
<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />
pick 会在第一个按钮选中时被设为 first,在第二个按钮选中时被设为 second。
选择器选项
<select v-model="selected">
<!-- 内联对象字面量 -->
<option :value="{ number: 123 }">123</option>
</select>
v-model 同样也支持非字符串类型的值绑定!在上面这个例子中,当某个选项被选中,selected 会被设为该对象字面量值 { number: 123 }。
修饰符
.lazy
默认情况下,v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据:
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />
.number
如果你想让用户输入自动转换为数字,你可以在 v-model 后添加 .number 修饰符来管理输入:
<input v-model.number="age" />
如果该值无法被 parseFloat() 处理,那么将返回原始值。
number 修饰符会在输入框有 type="number" 时自动启用。
.trim
如果你想要默认自动去除用户输入内容中两端的空格,你可以在 v-model 后添加 .trim 修饰符:
<input v-model.trim="msg" />
组件上的 v-model
如果你还不熟悉 Vue 的组件,那么现在可以跳过这个部分。
HTML 的内置表单输入类型并不总能满足所有需求。幸运的是,我们可以使用 Vue 构建具有自定义行为的可复用输入组件,并且这些输入组件也支持 v-model!要了解更多关于此的内容,请在组件指引中阅读配合 v-model 使用。