使用Vue创建自定义表单inputs
0 Views 前端 with
本文字数:789 字 | 阅读时长 ≈ 3 min

使用Vue创建自定义表单inputs

0 Views 前端 with
本文字数:789 字 | 阅读时长 ≈ 3 min

本节主要讲述使用Vue创建自定义表单inputs

这篇文章将会帮助你理解以下几点内容:

v-model是如何工作的?

官方的Vue文档对于v-model如何工作已经讲的很清楚,但是仍然有一些遗漏点。不过不要紧,为了更好的理解v-model,我会从头介绍这块内容。v-model实质上只是为我们提供双向数据绑定功能的语法糖。其会随着不同类型的表单控件而不同。比如下面的示例:

文本输入框

1
2
3
4
5
<div id="app">
<input v-model="message" placeholder="Edit me">
<p>Message:{{ message }}</p>
<textarea v-model="message" placeholder="Add multiple lines"></textarea>
</div>
1
2
3
4
5
6
7
8
<script>
new Vue({
el:"#app",
data:{
message:""
}
})
</script>

当使用文本输入框(包括emailnumber类型等)或者textarea类型时,v-model="varName"等同于:value="varName" @input = "e => varName = e.target.value"。这意味着每次在文本框输入时,input事件通过输入事件将value值传给varName,每次输入时使用这种方式更新varName。同样,除了含有multiple属性的select元素,普通的select也是这种实现方式。

单选按钮

那么单选按钮是怎么实现的呢?

1
2
3
4
5
<div id="app">
<input type="radio" value="one" v-model="picked">
<input type="radio" value="two" v-model="picked">
<span>Picked:{{ picked }}</span>
</div>
1
2
3
4
5
6
new Vue({
el:"#app",
data:{
picked:""
}
})

上面的示例代码相当于:

1
2
3
4
5
<div id="app">
<input type="radio" value="one" :checked="picked='one'" @change="picked=$event.target.value">
<input type="radio" value="two" :checked="picked='two'" @change="picked=$event.target.value">
<span>Picked:{{ picked }}</span>
</div>

可以看出来v-modelinputvalue值没有直接关系。但是它依然在change事件发生时做了同样的事情(尽管input事件变成了change事件)。然后根据picked的值是否与该单选按钮的值相同,确定单选按钮是否被选中。

多选框

多选框相对而言要复杂一点。因为它有两种不同的表现行为,这取决于只有一个单独的checkbox绑定了v-model指令,还是多个都绑定了v-model指令。

如果你使用单个复选框,则v-model会将其视为布尔值,并忽略该值:

1
<input type="checkbox" value="foo" v-model="isChecked" />

相当于下面的代码:

1
<input type="checkbox" value="foo" :checked="isChecked" @change="isChecked = $event.target.value" />

v-model 如何在组件上工作?

由于 Vue 并不知道自定义组件的功能是什么,如果自定义组件用作和表单 input 元素类似的功能,Vue 将该自定义组件视为与 v-model 实现原理相同。自定义组件实际的工作原理与文本输入框完全相同,只是在事件处理程序中,它不会将事件对象传递给它,而是期望将值直接传递给它

May 31, 2018
May 30, 2018
May 30, 2018