Vue | 10 表单输入绑定

内容提要：

1. 基本用法：文本、多行文本、复选框、单选框、下拉列表；
2. 复选框、单选框、列表选项的值绑定；
3. .lazy .number .trim修饰符。

基本用例

你能用v-model指令去创建双向的数据绑定在表单的输入框，文本框，和选项元素。它会自动的选择正确的方式去更新元素基于输入的类型。虽然很神奇，v-model是一个语法糖，它在用于输入的事件中更新数据，加上一些边缘情况的特殊处理。

v-model将忽略所有表单元素的value，checked或selected属性的初始值，它总是把Vue实例作为真正的数据来源。你应该在JavaScript端声明初始化数据，写在data对象当中。

对于需要使用的输入法IME（Chinese，Japanese， Korean等）语言，你会注意到v-model没有被更新在输入法合成文字期间，如果你想去满足这些更新，用input事件代替。

Text

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

输入字母后同时响应：

多行文字

<span>Multiline message is：</span>
<p style="white-space: pre-line;">{{ message}}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

界面：

输入后：

复选框

单个的复选框只有两种状态：选中和未选中，所以它的值有一个布尔值表示：boolean value：


如上：
复选框由两部分构成，表达选中状态的方块，和显示对象状态的标签。原生复选框其实是由input的类型指定，而不是表示为类似的标签，当然在element框架中它被表示为,这其实是封装的结果。而后面的用于显示的值我们显示为label标签。

接下来就是如何显示两种状态，需要用到v-model属性实现显出数据的最新值。

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

for：指定label绑定了input元素的id。

多个复选框，绑定相同的数组：
这里面需要注意一个细节：

我们在每一个input绑定的是相同的属性数组，并指定了input的值，选中与否的状态分别对应数组中值的显示与擦除。

初始界面：

随机选中后：

<div id="example-3">
<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">
<br>
<span>Checked names: {{ checkedNames }}</span>                                                                   
</div>

new Vue({
    el: '#example-3',
    data:{
        checkedNames:[]
    }
})

单选框

形式与复选框一致，type="radio"

下拉列表选项

分为：单选和多选

标签不再是input指定某个类型了，列表提供了一个专有标签select, 选中的属性值需要绑定到此标签。而里面的每一项为一个option标签对。

<select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected:{{ selected }}</span>

new Vue({
    el:"...",
    data:{
        selected:''
    }
})

下拉效果：

选中效果：

如果v-model表达式的值不匹配任何option的值，那么select标签元素渲染为未选中状态。在iOS设备上将引起用于不能够选择第一个item因为iOS不能触发一个改变事件。因此建议你提供一个disabled选项和一个空值，如同上例所示。

多选绑定一个数组：

需要在select标签下添加一个属性multiple。

使用v-for动态渲染options。

实现如下效果：

这个下拉列表的特点是下拉框和显示的被选择的值并不一致，显然是一一对应的关系：One：A，Two：B，Three：C。我们将构造一个数组列表实现这样的数据对应效果。我们利用v-bind:value来动态绑定选项值。注意当我们不指定这个value的时候，它会把显示的值默认当成选择的值，而当我们指定value之后，它会取value的值。只不过这一次我们的用v-for循环来实现。它会自动取到value给到我们在中绑定的属性。

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

new Vue({
    el: '...',
    data: {
        selected:'A',
        options: [
            {text: 'One', value: 'A'},
            {text: 'Two', value: 'B'},
            {text: 'Three', value: 'C'}
        ]
    }
})

值绑定

对于单选框，复选框，和下拉列表选项，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>

但有时我们想绑定值给Vue实例的一个动态属性。我们能使用v-bind实现。例外，使用v-bind允许我们去绑定非字符串的输入值。

复选框

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

// 当选中时
vm.toggle === 'yes'
// 当取消选中时
vm.toggle === 'no'

true-value 和 false-value并不影响输入的value属性，因为浏览器在表单添加时不包含unchecked box。为了保证这两个值至少有一个值提交，使用单选输入框代替。

单选框

<input type="radio" v-model="pick" v-bind:value="a">

// 当被选中时
vm.pick = vm.a

选择框选项

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

// 当被选择
typeof vm.selected // => object
vm.selected.number // => 123

修饰符

.lazy

默认，input的数据在每一次input输入事件后同步数据（除了输入法合成文字时）。你能够增加lazy修饰符改为change事件后同步数据。

即：data数据的更新事件不同，如果不加lazy，一遍输入一遍更新，如果加上lazy，输入完成后光标离开输入框时才更新绑定的data。

<!-- 用“change”事件代替“input”事件同步数据-->
<input v-model.lazy="msg">

.number

如果你想要用户的输入自动把类型转换为数字，你可以在v-model上加一个number修饰符。

<input v-model.nubmer="age" type="number">

这是有用的，因为即使type="number",HTML输入元素的值总是返回一个字符串，如果无法用parseFloat()解析原值，则返回原始值。

.trim

如果你想让输入被自动剪掉首尾的空格，那么使用trim修饰符给v-model。

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

在组件上使用v-model

如果你不熟悉Vue的组件，可以跳过这章

HTML原生的输入类型并不能总是满足你的需要。幸运的是，Vue的组件允许你去创建可复用的输入框去完成你的自定义行为。这些输入框甚至可以和v-model一起工作。更多内容，可以阅读custom inputs 。