15 表单输入绑定

15 表单输入绑定

原文： https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/

欢迎参加有约束力的讨论！现在我们已经了解了这个超级巨星v-model，它用于在表单元素上实现双向数据绑定，让我们直观地了解 Vue 如何在引擎盖下神奇地工作，通过选择正确的更方式来更新特定 HTML 元素，基于它是单选按钮还是复选框还是select元素。

今天，我们将讨论以下内容，

单选框
多个复选框
单选按钮
单选下拉菜单
多选下拉菜单
带有动态选项的下拉菜单

第一件事第一！以下是我们将要使用的初始代码，

起始代码

index.html

<!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

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

单选框

看下面的代码片段，

index.html（代码段）

<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

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

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

多个复选框

现在，让我们有四个复选框，其值均绑定到同一数组。

index.html（代码段）

<div>
  <h4>Multiple checkboxes with values of an array</h4>
  <!-- value bindings: multiple checkboxes -->
  <input type="checkbox" id="cars" value="Cars" v-model="checkedFilms">
  <label for="cars">Cars</label>
  <input type="checkbox" id="brave" value="Brave" v-model="checkedFilms">
  <label for="brave">Brave</label>
  <input type="checkbox" id="up" value="Up" v-model="checkedFilms">
  <label for="up">Up</label>
  <input type="checkbox" id="ratatouille" value="Ratatouille" v-model="checkedFilms">
  <label for="ratatouille">Ratatouille</label>
  <br/>
  <span>Selected pixar films are: {{ checkedFilms }}</span>
</div>

index.js（代码段）

data: { 
  checkedFilms: [] 
}

因此，所有四个输入元素均为checkbox类型，并且每个元素都具有与数组checkedFilms”的双向绑定。请注意，该数组的初始值在 Vue 实例的data属性中为空。在这里v-model的工作方式是，在数组checkedFilms中填充所选复选框的值。

单选按钮

很容易猜出v-model在单选按钮下的行为。由于我们只能从组中选择一个单选按钮，因此绑定两种方式的变量将获取所选单选按钮的值。

index.html（代码段）

<div>
  <h4>Radio buttons</h4>
  <input type="radio" id="html" value="HTML" v-model="selected">
  <label for="html">HTML</label>
  <br>
  <input type="radio" id="css" value="CSS" v-model="selected">
  <label for="two">CSS</label>
  <br>
  <input type="radio" id="javascript" value="JavaScript" v-model="selected">
  <label for="JavaScript">JavaScript</label>
  <br>
  <span>Selected option: {{ selected }}</span>
</div>

index.js（代码段）

data: { 
  selected: '' 
}

根据选择的选项，变量selected获得HTML或CSS或JavaScript的值。

单选下拉菜单

这是一个正常的下拉列表，您可以在其中选择一个选项。

index.html（代码段）

<div>
  <h4>Radio buttons</h4>
  <input type="radio" id="html" value="HTML" v-model="selected">
  <label for="html">HTML</label>
  <br>
  <input type="radio" id="css" value="CSS" v-model="selected">
  <label for="two">CSS</label>
  <br>
  <input type="radio" id="javascript" value="JavaScript" v-model="selected">
  <label for="JavaScript">JavaScript</label>
  <br>
  <span>Selected option: {{ selected }}</span>
</div>

index.js（代码段）

data: { 
  singleSelect: '' 
}

变量singleSelect最初是一个空字符串。由于v-model的魔力，它获得了从下拉列表中选择的选项的值。

多选下拉菜单

在这里，我们可以从下拉菜单中选择多个选项，因此 Vue 实例的data属性中multiselect变量的初始值是一个空数组。

index.html （代码段）

<div>
  <h4>Multiselect dropdown</h4>
  <select v-model="multiselect" multiple>
    <option value="Dance">Dance</option>
    <option value="Swim">Swim</option>
    <option value="Paint">Paint</option>
    <option value="Play tennis">Play tennis</option>
  </select>
  <br>
  <span>I know to: {{ multiselect }}</span>
</div>

index.js（代码段）

data: { 
  multiselect: [] 
}

将使用从下拉列表中选择的所有值填充数组。（对于多项选择，请向下按Ctrl键，然后选择。）

带有动态选项的下拉菜单

在实时场景中，下拉菜单的选项并不总是已知的。另外，对值进行硬编码永远不是一个好习惯。因此，在必须处理动态数据的情况下，可以将v-bind与v-model一起使用。 结合使用它们会赋予您无穷的力量！ 让我们也利用v-for指令遍历我们可能要处理的所有选项。

index.html（代码段）

<div>
  <h4>Handling dynamic options</h4>
  <select v-model="dynamicSelection">
    <option v-for="letter in alphabet" v-bind:value="letter.word">
      {{ letter.for }}
    </option>
  </select>
  <span>Selected letter: {{ dynamicSelection }}</span>
</div>

Index.js（代码段）

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

<!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>
        <h4>Single checkbox with a boolean value</h4>
        <!-- value bindings: single checkbox -->
        <input type="checkbox" id="single" v-model="chosen">
        <label for="single">{{ chosen }}</label>
      </div>
      <hr/>
      <div>
        <h4>Multiple checkboxes with values of an array</h4>
        <!-- value bindings: multiple checkboxes -->
        <input type="checkbox" id="cars" value="Cars" v-model="checkedFilms">
        <label for="cars">Cars</label>
        <input type="checkbox" id="brave" value="Brave" v-model="checkedFilms">
        <label for="brave">Brave</label>
        <input type="checkbox" id="up" value="Up" v-model="checkedFilms">
        <label for="up">Up</label>
        <input type="checkbox" id="ratatouille" value="Ratatouille" v-model="checkedFilms">
        <label for="ratatouille">Ratatouille</label>
        <br/>
        <span>Selected pixar films are: {{ checkedFilms }}</span>
      </div>
      <hr/>
      <div>
        <h4>Radio buttons</h4>
        <input type="radio" id="html" value="HTML" v-model="selected">
        <label for="html">HTML</label>
        <br>
        <input type="radio" id="css" value="CSS" v-model="selected">
        <label for="two">CSS</label>
        <br>
        <input type="radio" id="javascript" value="JavaScript" v-model="selected">
        <label for="JavaScript">JavaScript</label>
        <br>
        <span>Selected option: {{ selected }}</span>
      </div>
      <hr/>
      <div>
        <h4>Single select dropdown</h4>
        <select v-model="singleSelect">
          <option disabled value="">Please select one</option>
          <option>Chocolate</option>
          <option>Ice cream</option>
          <option>Green Tea</option>
        </select>
        <span>I love: {{ singleSelect }}</span>
      </div>
      <hr/>
      <div>
        <h4>Multiselect dropdown</h4>
        <select v-model="multiselect" multiple>
          <option value="Dance">Dance</option>
          <option value="Swim">Swim</option>
          <option value="Paint">Paint</option>
          <option value="Play tennis">Play tennis</option>
        </select>
        <br>
        <span>I know to: {{ multiselect }}</span>
      </div>
      <hr/>
      <div>
        <h4>Handling dynamic options</h4>
        <select v-model="dynamicSelection">
          <option v-for="letter in alphabet" v-bind:value="letter.word">
            {{ letter.for }}
          </option>
        </select>
        <span>Selected letter: {{ dynamicSelection }}</span>
      </div>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
    <link rel="stylesheet" href="style.css"></link>
  </body>
</html>

index.js

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 仓库中找到整个代码，以方便参考。随意拨叉并编写代码以符合您的内心需求。

现在是时候在您自己的示例中练习其中的一些表单输入，如果您有任何疑问，请在评论部分留言。

祝你今天愉快！