Vue.js入门-5-表单输入绑定

表单输入绑定

基础用法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

文本

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

多行文本

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

复选框

单个复选框,绑定到布尔值:

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

多个复选框,绑定到同一个数组:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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">
<label for="mike">Mike</label>
<br>
<span>Checked names: { { checkedNames } }</span>
</div>

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

单选按钮

v-model 绑定的值为 value。One 或者 Two

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: { { picked } }</span>
</div>

new Vue({
el: '#example-4',
data: {
picked: ''
}
})

选择框

v-model绑定的值,在选中的情况下为 option的value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: { { selected } }</span>
</div>

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

多选时 (绑定到一个数组):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: { { selected } }</span>
</div>

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

用 v-for 渲染的动态选项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):

1
2
3
4
5
6
7
8
9
10
<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle`truefalse -->
<input type="checkbox" v-model="toggle">

<!-- 当选中时,`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>

把值绑定到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现

复选框

1
2
3
4
5
6
7
8
9
10
11
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

单选按钮

1
2
3
4
<input type="radio" v-model="pick" v-bind:value="a">

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

选择框的选项

1
2
3
4
5
6
7
8
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.lazy

默认情况下,v-model在input事件中同步输入框的值和数据。但可以添加一个修饰符lazy,从而转变为change事件中同步

1
2
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number修饰符:如果转换不成功则返回原值。

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

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

1
<input v-model.trim="msg">
文章目录
  1. 1. 基础用法
    1. 1.1. 文本
    2. 1.2. 多行文本
    3. 1.3. 复选框
    4. 1.4. 单选按钮
    5. 1.5. 选择框
  2. 2. 值绑定
    1. 2.1. 复选框
    2. 2.2. 单选按钮
    3. 2.3. 选择框的选项
  3. 3. 修饰符
    1. 3.1. .lazy
    2. 3.2. .number
    3. 3.3. .trim
|