1、基本用法
文本
<p>Message is: {{ message }}</p> <input v-model="message" placeholder="edit me" />
多行文本
<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <textarea v-model="message" placeholder="add multiple lines"></textarea>
注意在
<textarea>
中是不支持插值表达式的。请使用v-model
来替代:<!-- 错误 --> <textarea>{{ text }}</textarea> <!-- 正确 --> <textarea v-model="text"></textarea>
复选框
单一的复选框,绑定布尔类型值:
<input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{ checked }}</label>
我们也可以将多个复选框绑定到同一个数组或集合的值:
const checkedNames = ref([])
<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>
单选按钮
<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>
选择器
单个选择器的示例如下:
<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>
多选 (值绑定到一个数组):
<div>Selected: {{ selected }}</div> <select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option> </select>
2、值绑定
对于单选按钮,复选框和选择器选项,
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" />
单选按钮
<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 }
。
3、修饰符
.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" />