Vue | 10 表单输入绑定

内容提要:

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

基本用例

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

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

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

Text

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

text
输入字母后同时响应:
text-input

多行文字

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

界面:
multiline-message
输入后:
multiline-message-input
textarea

复选框

单个的复选框只有两种状态:选中和未选中,所以它的值有一个布尔值表示:boolean value:
checkbox-false
checkbox-true
如上:
复选框由两部分构成,表达选中状态的方块,和显示对象状态的标签。原生复选框其实是由input的类型指定,而不是表示为类似的标签,当然在element框架中它被表示为,这其实是封装的结果。而后面的用于显示的值我们显示为label标签。

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

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

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

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

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

初始界面:
checkbox-multiple
随机选中后:
checkbox-multiple-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:''
    }
})

selected-option
下拉效果:
selected-pulldown-option

选中效果:
selected-option-selected

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

多选绑定一个数组:

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

使用v-for动态渲染options。

实现如下效果:
selected-multiple
这个下拉列表的特点是下拉框和显示的被选择的值并不一致,显然是一一对应的关系: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-valuefalse-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

猜你喜欢

转载自blog.csdn.net/wudizhanshen/article/details/84347373