表单输入绑定 v-model

表单输入绑定

v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
• <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
• <select> 会绑定 value property 并侦听 change 事件。

基本用法

?

1 2	<p>Message is: {{ message }}</p> <input v-model="message" placeholder="edit me" />

多行文本

?

1 2 3

<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 来替代：　

?

1 2 3 4 5

<!-- 错误 --> <textarea>{{ text }}</textarea>   <!-- 正确 --> <textarea v-model="text"></textarea>

复选框

单一的复选框，绑定布尔类型值：

?

1 2	<input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{ checked }}</label>

将多个复选框绑定到同一个数组或集合的值：

?

1	const checkedNames = ref([])

　

?

1 2 3 4 5 6 7 8 9 10

<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>

　　checkedNames 数组将始终包含所有当前被选中的框的值。

单选按钮

?

1 2 3 4 5 6 7

<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>

选择器

单个选择器的示例如下：

?

1 2 3 4 5 6 7 8

<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>

　也可以设置 value 的值，如果没有设置值时，选择结果是A、B、C，有设置值选择结果为设置的 value 值

?

1 2 3 4 5 6

<select v-model="selected">    <option disabled value="">请选择一个</option>    <option value="1">A</option>    <option value="2">B</option>    <option value="3">C</option>  </select>

建议:提供一个空值的禁用选项,因为在 iOS 上，这将导致用户无法选择第一项， iOS 在这种情况下不会触发一个 change 事件

多选 (值绑定到一个数组)：

?

1 2 3 4 5 6 7

<div>Selected: {{ selected }}</div>   <select v-model="selected" multiple>   <option>A</option>   <option>B</option>   <option>C</option> </select>

　

 v-for 动态渲染选择器的选项：

?

1 2 3 4 5 6 7

const selected = ref('A')   const options = ref([   { text: 'One', value: 'A' },   { text: 'Two', value: 'B' },   { text: 'Three', value: 'C' } ])

　

?

1 2 3 4 5 6 7

<select v-model="selected">   <option v-for="option in options" :value="option.value">     {{ option.text }}   </option> </select>   <div>Selected: {{ selected }}</div>

绑定值

将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外，使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。

改变 checkbox 控件的默认 true 和 false 的值：

?

1 2 3 4 5

<input   type="checkbox"   v-model="toggle"   true-value="yes"   false-value="no" />

当为 True 时,值=yes 当为false时，值=no

将True 和 False 绑定到变量：
　

?

1 2 3 4 5

<input   type="checkbox"   v-model="toggle"   :true-value="dynamicTrueValue"   :false-value="dynamicFalseValue" />

单选按钮

?

1 2	<input type="radio" v-model="pick" :value="first" /> <input type="radio" v-model="pick" :value="second" />

　pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second。

选择器选项

?

1 2 3 4

<select v-model="selected">   <!-- 内联对象字面量 -->   <option :value="{ number: 123 }">123</option> </select>

　　v-model 同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，selected 会被设为该对象字面量值 { number: 123 }。

修饰符

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

?

1 2	<!-- 在 "change" 事件后同步更新而不是 "input" --> <input v-model.lazy="msg" />

.number

　如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

?

1	<input v-model.number="age" />

.trim

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

?

1	<input v-model.trim="msg" />