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

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

祝你今天愉快！

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Files

159.md

159.md

15 表单输入绑定

起始代码

单选框

多个复选框

单选按钮

单选下拉菜单

多选下拉菜单

带有动态选项的下拉菜单

Collapse file tree

Files

159.md

Latest commit

History

159.md

File metadata and controls

15 表单输入绑定

起始代码

单选框

多个复选框

单选按钮

单选下拉菜单

多选下拉菜单

带有动态选项的下拉菜单