# 15.表单输入绑定
> 原文： [https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/](https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/)
欢迎参加有约束力的讨论！ 现在我们已经了解了这个超级巨星`v-model`，它用于在表单元素上实现[双向数据绑定](https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/)，让我们通过选择正确的更新方式来直观地了解 Vue 如何在引擎盖下神奇地工作 基于是单选按钮还是复选框还是`select`元素的特定 HTML 元素。
今天，我们将讨论以下内容，
1. 单选框
2. 多个复选框
3. 单选按钮
4. 单选下拉菜单
5. 多选下拉菜单
6. 带有动态选项的下拉菜单
第一件事第一！ 以下是我们将要使用的初始代码，
## 起始码
index.html
```java
Hello Vue!
Welcome
```
index.js
```java
new Vue({
el: "#app",
data: {
}
});
```
## 单选框
看下面的代码片段，
`index.html`（代码段）
```java
Single checkbox with a boolean value
```
`index.js`
```java
new Vue({
el: "#app",
data: {
chosen: false
}
});
```
我们有一个`id`，`single`复选框。 让我们有一个变量`chosen`，该变量在 Vue 实例的`data`属性中分配为`false`。 选中该复选框可使`chosen`的值为`true`。 当与输入类型`checkbox`一起使用时，如果是布尔值，`v-model`就是这样工作的。
## 多个复选框
现在，让我们有四个复选框，其值均绑定到同一数组。
`index.html`（代码段）
```html
Multiple checkboxes with values of an array
Selected pixar films are: {{ checkedFilms }}
```
`index.js`（代码段）
```javascript
data: {
checkedFilms: []
}
```
因此，所有四个输入元素均为`checkbox`类型，并且每个元素都具有与数组`checkedFilms`”的双向绑定。 请注意，该数组的初始值在 Vue 实例的`data`属性中为空。 在这里`v-model`的工作方式是，在数组`checkedFilms`中填充所选复选框的值。
## 单选按钮
很容易猜出`v-model`在单选按钮下的行为。 由于我们只能从组中选择一个单选按钮，因此绑定两种方式的变量将获取所选单选按钮的值。
`index.html`（代码段）
```html
Radio buttons
Selected option: {{ selected }}
```
`index.js`（代码段）
```javascript
data: {
selected: ''
}
```
根据选择的选项，变量`selected`获得`HTML`或`CSS`或`JavaScript`的值。
## 单选下拉菜单
这是一个正常的下拉列表，您可以在其中选择一个选项。
`index.html`（代码段）
```html
Radio buttons
Selected option: {{ selected }}
```
`index.js`（代码段）
```javascript
data: {
singleSelect: ''
}
```
变量`singleSelect`最初是一个空字符串。 由于`v-model`的魔力，它获得了从下拉列表中选择的选项的值。
## 多选下拉菜单
在这里，我们可以从下拉菜单中选择多个选项，因此 Vue 实例的`data`属性中`multiselect`变量的初始值是一个空数组。
`index.html` （代码段）
```html
Multiselect dropdown
I know to: {{ multiselect }}
```
`index.js`（代码段）
```javascript
data: {
multiselect: []
}
```
将使用从下拉列表中选择的所有值填充数组。 （对于多项选择，请向下按`Ctrl`键，然后选择。）
## 带有动态选项的下拉菜单
在实时场景中，下拉菜单的选项并不总是已知的。 另外，对值进行硬编码永远不是一个好习惯。 因此，在必须处理动态数据的情况下，可以将`v-bind`与`v-model`一起使用。 *结合使用它们会赋予您无穷的力量！* 让我们也利用`v-for`指令遍历我们可能要处理的所有选项。
`index.html`（代码段）
```html
Handling dynamic options
Selected letter: {{ dynamicSelection }}
```
`Index.js`（代码段）
```javascript
data: {
dynamicSelection: 'Apple',
alphabet: [
{ word: 'Apple', for: 'A' },
{ word: 'Bat', for: 'B' },
{ word: 'Cat', for: 'C' }
]
}
```
在此，对于`alphabet`数组中的每个对象，下拉列表中均列出了“A”，“B”和“C”，并且`word`绑定到了选项标签的`value`属性。 根据选择的值，`word`在`dynamicSelection`变量中更新。 请注意，初始值是`alphabet`数组中的第一个单词。
到此为止，让我们看一下到目前为止的完整代码。
`index.html`
```html
Hello Vue!
```
`index.js`
```javascript
new Vue({
el: "#app",
data: {
chosen: false,
checkedFilms: [],
selected: '',
singleSelect: '',
multiselect: [],
dynamicSelection: 'Apple',
alphabet: [
{ word: 'Apple', for: 'A' },
{ word: 'Bat', for: 'B' },
{ word: 'Cat', for: 'C' }
]
}
});
```
与往常一样，可以在 [GitHub 仓库](https://github.com/JBTAdmin/vuejs)中找到整个代码，以方便参考。 随意拨叉并编写代码以符合您的内心需求。
现在是时候在您自己的示例中练习其中的一些表单输入，如果您有任何疑问，请在注释部分大声疾呼。
祝你今天愉快！