# 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
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Welcome</h2>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
  </body>
</html>
```

index.js

```java
new Vue({
  el: "#app",
  data: {
  }
});
```

## 单选框

看下面的代码片段，

index.html（摘要）

```java
<div>
  <h4>Single checkbox with a boolean value</h4>
  <!-- form input bindings: single checkbox -->
  <input type="checkbox" id="single" v-model="chosen">
  <label for="single">{{ chosen }}</label>
</div>
```

index.js

```java
new Vue({
  el: "#app",
  data: {
    chosen: false
  }
});
```

我们有一个`id`，`single`复选框。 让我们有一个变量`chosen`，该变量在 Vue 实例的`data`属性中分配为`false`。 选中该复选框可使`chosen`的值为`true`。 当与输入类型`checkbox`一起使用时，如果是布尔值，`v-model`就是这样工作的。

![single checkbox](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20565%20279'%3E%3C/svg%3E)

<noscript><img alt="single checkbox" class="alignnone size-full wp-image-14246" height="279" sizes="(max-width: 565px) 100vw, 565px" src="img/18d8f69ec85bdd75c7dd6ec68e670134.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/1_SingleCheckbox.jpg 565w, https://javabeginnerstutorial.com/wp-content/uploads/2019/05/1_SingleCheckbox-300x148.jpg 300w" width="565"/><h2>多个复选框</h2><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>现在，让我们有四个复选框，其值均绑定到同一数组。</p><p>index.html (snippet)</p><pre><code class="language-html">&lt;div&gt; &lt;h4&gt;Multiple checkboxes with values of an array&lt;/h4&gt; &lt;!-- value bindings: multiple checkboxes --&gt; &lt;input type="checkbox" id="cars" value="Cars" v-model="checkedFilms"&gt; &lt;label for="cars"&gt;Cars&lt;/label&gt; &lt;input type="checkbox" id="brave" value="Brave" v-model="checkedFilms"&gt; &lt;label for="brave"&gt;Brave&lt;/label&gt; &lt;input type="checkbox" id="up" value="Up" v-model="checkedFilms"&gt; &lt;label for="up"&gt;Up&lt;/label&gt; &lt;input type="checkbox" id="ratatouille" value="Ratatouille" v-model="checkedFilms"&gt; &lt;label for="ratatouille"&gt;Ratatouille&lt;/label&gt; &lt;br/&gt; &lt;span&gt;Selected pixar films are: {{ checkedFilms }}&lt;/span&gt; &lt;/div&gt;</code></pre><p>index.js（摘要）</p><pre><code class="language-javascript">data: { checkedFilms: [] }</code></pre><p>因此，所有四个输入元素均为<code>checkbox</code>类型，并且每个元素都具有与数组[<code>checkedFilms</code>”的双向绑定。 请注意，该数组的初始值在 Vue 实例的 data 属性中为空。 在这里<code>v-model</code>的工作方式是，在数组<code>checkedFilms</code>中填充所选复选框的值。</p><p><img alt="multiple checkboxes" class="alignnone size-full wp-image-14247" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/2_MultipleCheckboxes.jpg" height="279" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20651%20279'%3E%3C/svg%3E" width="651"/></p><noscript><img alt="multiple checkboxes" class="alignnone size-full wp-image-14247" height="279" src="img/775b75ab3538998b8c45749623fcc078.png" width="651"/><h2>单选按钮</h2><p>很容易猜出 v 模型在单选按钮下的行为。 由于我们只能从组中选择一个单选按钮，因此绑定两种方式的变量将获取所选单选按钮的值。</p><p>index.html（代码段）</p><pre><code class="language-html">&lt;div&gt; &lt;h4&gt;Radio buttons&lt;/h4&gt; &lt;input type="radio" id="html" value="HTML" v-model="selected"&gt; &lt;label for="html"&gt;HTML&lt;/label&gt; &lt;br&gt; &lt;input type="radio" id="css" value="CSS" v-model="selected"&gt; &lt;label for="two"&gt;CSS&lt;/label&gt; &lt;br&gt; &lt;input type="radio" id="javascript" value="JavaScript" v-model="selected"&gt; &lt;label for="JavaScript"&gt;JavaScript&lt;/label&gt; &lt;br&gt; &lt;span&gt;Selected option: {{ selected }}&lt;/span&gt; &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { selected: '' }</code></pre><p>根据选择的选项，变量<code>selected</code>获得<code>HTML</code>或<code>CSS</code>或<code>JavaScript</code>的值。</p><p><img alt="radio buttons" class="alignnone size-full wp-image-14248" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/3_RadioButton-1.jpg" height="270" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20396%20270'%3E%3C/svg%3E" width="396"/></p><noscript><img alt="radio buttons" class="alignnone size-full wp-image-14248" height="270" src="img/7c55c44f959daa00b8e64489484090ec.png" width="396"/><h2>单选下拉菜单</h2><p>这是一个正常的下拉列表，您可以在其中选择一个选项。</p><p>index.html (Snippet)</p><pre><code class="language-html">&lt;div&gt; &lt;h4&gt;Single select dropdown&lt;/h4&gt; &lt;select v-model="singleSelect"&gt; &lt;option disabled value=""&gt;Please select one&lt;/option&gt; &lt;option&gt;Chocolate&lt;/option&gt; &lt;option&gt;Ice cream&lt;/option&gt; &lt;option&gt;Green Tea&lt;/option&gt; &lt;/select&gt; &lt;span&gt;I love: {{ singleSelect }}&lt;/span&gt; &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { singleSelect: '' }</code></pre><p>变量<code>singleSelect</code>最初是一个空字符串。 由于<code>v-model</code>的魔力，它获得了从下拉列表中选择的选项的值。</p><p><img alt="dropdown" class="alignnone size-full wp-image-14249" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/4_Dropdown.jpg" height="250" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20453%20250'%3E%3C/svg%3E" width="453"/></p><noscript><img alt="dropdown" class="alignnone size-full wp-image-14249" height="250" src="img/5165a1056715fafef54e5a75fc6e11d8.png" width="453"/><h2>多选下拉菜单</h2><p>在这里，我们可以从下拉菜单中选择多个选项，因此 Vue 实例的 data 属性中<code>multiselect</code>变量的初始值是一个空数组。</p><p>index.html (Snippet)</p><pre><code class="language-html">&lt;div&gt; &lt;h4&gt;Multiselect dropdown&lt;/h4&gt; &lt;select v-model="multiselect" multiple&gt; &lt;option value="Dance"&gt;Dance&lt;/option&gt; &lt;option value="Swim"&gt;Swim&lt;/option&gt; &lt;option value="Paint"&gt;Paint&lt;/option&gt; &lt;option value="Play tennis"&gt;Play tennis&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;span&gt;I know to: {{ multiselect }}&lt;/span&gt; &lt;/div&gt;</code></pre><p>index.js (snippet)</p><pre><code class="language-javascript">data: { multiselect: [] }</code></pre><p>将使用从下拉列表中选择的所有值填充数组。 （对于多项选择，请向下按<code>Ctrl</code>键，然后选择。）</p><p><img alt="Multi-select dropdown" class="alignnone size-full wp-image-14250" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/5_MultiselectDropdown-1.jpg" height="303" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20443%20303'%3E%3C/svg%3E" width="443"/></p><noscript><img alt="Multi-select dropdown" class="alignnone size-full wp-image-14250" height="303" src="img/bb52eae3e158a2c87d3c8c950853eb93.png" width="443"/><h2>带有动态选项的下拉菜单</h2><p>在实时场景中，下拉菜单的选项并不总是已知的。 另外，对值进行硬编码永远不是一个好习惯。 因此，在必须处理动态数据的情况下，可以将<code>v-bind</code>与<code>v-model</code>一起使用。 <em>结合使用它们会赋予您无穷的力量！ </em>让我们也利用<code>v-for</code>指令遍历我们可能要处理的所有选项。</p><p>index.html (Snippet)</p><pre><code class="language-html">&lt;div&gt; &lt;h4&gt;Handling dynamic options&lt;/h4&gt; &lt;select v-model="dynamicSelection"&gt; &lt;option v-for="letter in alphabet" v-bind:value="letter.word"&gt; {{ letter.for }} &lt;/option&gt; &lt;/select&gt; &lt;span&gt;Selected letter: {{ dynamicSelection }}&lt;/span&gt; &lt;/div&gt;</code></pre><p>Index.js（代码段）</p><pre><code class="language-javascript">data: { dynamicSelection: 'Apple', alphabet: [ { word: 'Apple', for: 'A' }, { word: 'Bat', for: 'B' }, { word: 'Cat', for: 'C' } ] }</code></pre><p>在此，对于<code>alphabet</code>数组中的每个对象，下拉列表中均列出了“A”，“B”和“C”，并且<code>word</code>绑定到了选项标签的<code>value</code>属性。 根据选择的值，<code>word</code>在<code>dynamicSelection</code>变量中更新。 请注意，初始值是<code>alphabet</code>数组中的第一个单词。</p><p><img alt="dropdown with dynamic values" class="alignnone size-full wp-image-14251" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2019/05/6_DynamicValuesDropdown-1.jpg" height="273" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20401%20273'%3E%3C/svg%3E" width="401"/></p><noscript><img alt="dropdown with dynamic values" class="alignnone size-full wp-image-14251" height="273" src="img/1dca15a5c7b76393d01c3652b473cc94.png" width="401"/><p>到此为止，让我们看一下到目前为止的完整代码。</p><p>index.html</p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;div&gt; &lt;h4&gt;Single checkbox with a boolean value&lt;/h4&gt; &lt;!-- value bindings: single checkbox --&gt; &lt;input type="checkbox" id="single" v-model="chosen"&gt; &lt;label for="single"&gt;{{ chosen }}&lt;/label&gt; &lt;/div&gt; &lt;hr/&gt; &lt;div&gt; &lt;h4&gt;Multiple checkboxes with values of an array&lt;/h4&gt; &lt;!-- value bindings: multiple checkboxes --&gt; &lt;input type="checkbox" id="cars" value="Cars" v-model="checkedFilms"&gt; &lt;label for="cars"&gt;Cars&lt;/label&gt; &lt;input type="checkbox" id="brave" value="Brave" v-model="checkedFilms"&gt; &lt;label for="brave"&gt;Brave&lt;/label&gt; &lt;input type="checkbox" id="up" value="Up" v-model="checkedFilms"&gt; &lt;label for="up"&gt;Up&lt;/label&gt; &lt;input type="checkbox" id="ratatouille" value="Ratatouille" v-model="checkedFilms"&gt; &lt;label for="ratatouille"&gt;Ratatouille&lt;/label&gt; &lt;br/&gt; &lt;span&gt;Selected pixar films are: {{ checkedFilms }}&lt;/span&gt; &lt;/div&gt; &lt;hr/&gt; &lt;div&gt; &lt;h4&gt;Radio buttons&lt;/h4&gt; &lt;input type="radio" id="html" value="HTML" v-model="selected"&gt; &lt;label for="html"&gt;HTML&lt;/label&gt; &lt;br&gt; &lt;input type="radio" id="css" value="CSS" v-model="selected"&gt; &lt;label for="two"&gt;CSS&lt;/label&gt; &lt;br&gt; &lt;input type="radio" id="javascript" value="JavaScript" v-model="selected"&gt; &lt;label for="JavaScript"&gt;JavaScript&lt;/label&gt; &lt;br&gt; &lt;span&gt;Selected option: {{ selected }}&lt;/span&gt; &lt;/div&gt; &lt;hr/&gt; &lt;div&gt; &lt;h4&gt;Single select dropdown&lt;/h4&gt; &lt;select v-model="singleSelect"&gt; &lt;option disabled value=""&gt;Please select one&lt;/option&gt; &lt;option&gt;Chocolate&lt;/option&gt; &lt;option&gt;Ice cream&lt;/option&gt; &lt;option&gt;Green Tea&lt;/option&gt; &lt;/select&gt; &lt;span&gt;I love: {{ singleSelect }}&lt;/span&gt; &lt;/div&gt; &lt;hr/&gt; &lt;div&gt; &lt;h4&gt;Multiselect dropdown&lt;/h4&gt; &lt;select v-model="multiselect" multiple&gt; &lt;option value="Dance"&gt;Dance&lt;/option&gt; &lt;option value="Swim"&gt;Swim&lt;/option&gt; &lt;option value="Paint"&gt;Paint&lt;/option&gt; &lt;option value="Play tennis"&gt;Play tennis&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;span&gt;I know to: {{ multiselect }}&lt;/span&gt; &lt;/div&gt; &lt;hr/&gt; &lt;div&gt; &lt;h4&gt;Handling dynamic options&lt;/h4&gt; &lt;select v-model="dynamicSelection"&gt; &lt;option v-for="letter in alphabet" v-bind:value="letter.word"&gt; {{ letter.for }} &lt;/option&gt; &lt;/select&gt; &lt;span&gt;Selected letter: {{ dynamicSelection }}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="style.css"&gt;&lt;/link&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>index.js</p><pre><code class="language-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' } ] } });</code></pre><p>与往常一样，可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到整个代码，以方便参考。 随意拨叉并编写代码以符合您的内心需求。</p><p>现在是时候在您自己的示例中练习其中的一些表单输入，如果您有任何疑问，请在注释部分大声疾呼。</p><p>祝你今天愉快！</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/18-class-bindings/" title="18\. Class bindings"> 18.类绑定</a></h5></div></div> </body> </html></noscript>