参考手册
Vue 教程
Vue 路由
Vue 动画

Vue 表单输入

我们在本教程前面的 Vue 表单 和 v-model 页面上看到了一些表单输入的实例。

这个页面是 Vue 中更多表单输入实例的集合，如单选按钮、复选框、下拉列表和普通文本输入框。

单选按钮

属于同一选项的单选按钮必须具有相同的名称，以便只能选择一个单选按钮。

与 Vue 中的所有输入一样，我们使用 v-model 捕获单选按钮输入值，但 value 属性也必须在 <input type="radio"> 标记上显式设置。

这就是我们如何在 Vue 表单中使用单选按钮:

实例

App.vue:

  1. <template>
  2.   <h1>Radio Buttons in Vue</h1>
  3.   <form @submit.prevent="registerAnswer">
  4.     <p>What is your favorite animal?</p>
  5.     <label>
  6.       <input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> Cat
  7.     </label>
  8.     <label>
  9.       <input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> Dog
  10.     </label>
  11.     <label>
  12.       <input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> Turtle
  13.     </label>
  14.     <label>
  15.       <input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> Moose
  16.     </label>
  17.     <button type="submit">Submit</button>
  18.   </form>
  19.   <div>
  20.     <h3>Submitted choice:</h3>
  21.     <p id="pAnswer">{{ inpValSubmitted }}</p>
  22.   </div>
  23. </template>
  25. <script>
  26. export default {
  27.   data() {
  28.     return {
  29.       inpVal: '',
  30.       inpValSubmitted: 'Not submitted yet'
  31.     }
  32.   },
  33.   methods: {
  34.     registerAnswer() {
  35.       if(this.inpVal) {
  36.         this.inpValSubmitted = this.inpVal;
  37.       }
  38.     }
  39.   }
  40. }
  41. </script>
  43. <style scoped>
  44.   div {
  45.     border: dashed black 1px;
  46.     border-radius: 10px;
  47.     padding: 0 20px 20px 20px;
  48.     margin-top: 20px;
  49.     display: inline-block;
  50.   }
  51.   button {
  52.     margin: 10px;
  53.   }
  54.   label {
  55.     display: block;
  56.     width: 80px;
  57.     padding: 5px;
  58.   }
  59.   label:hover {
  60.     cursor: pointer;
  61.     background-color: rgb(211, 244, 211);
  62.     border-radius: 5px;
  63.   }
  64.   #pAnswer {
  65.     background-color: lightgreen;
  66.     padding: 5px;
  67.   }
  68. </style>
运行一下

复选框

当复选框输入（<input type="checkbox">）与 v-model 连接到同一个数组时，选中复选框的值将归集在该数组中：

实例

App.vue:

  1. <template>
  2.   <h1>Checkbox Inputs in Vue</h1>
  3.   <form @submit.prevent="registerAnswer">
  4.     <p>What kinds of food do you like?</p>
  5.     <label>
  6.       <input type="checkbox" v-model="likeFoods" value="Pizza"> Pizza
  7.     </label>
  8.     <label>
  9.       <input type="checkbox" v-model="likeFoods" value="Rice"> Rice
  10.     </label>
  11.     <label>
  12.       <input type="checkbox" v-model="likeFoods" value="Fish"> Fish
  13.     </label>
  14.     <label>
  15.       <input type="checkbox" v-model="likeFoods" value="Salad"> Salad
  16.     </label>
  17.     <button type="submit">Submit</button>
  18.   </form>
  19.   <div>
  20.     <h3>Submitted answer:</h3>
  21.     <p id="pAnswer">{{ inpValSubmitted }}</p>
  22.   </div>
  23. </template>
  25. <script>
  26. export default {
  27.   data() {
  28.     return {
  29.       likeFoods: [],
  30.       inpValSubmitted: 'Not submitted yet'
  31.     }
  32.   },
  33.   methods: {
  34.     registerAnswer() {
  35.       this.inpValSubmitted = this.likeFoods;
  36.     }
  37.   }
  38. }
  39. </script>
  41. <style scoped>
  42.   div {
  43.     border: dashed black 1px;
  44.     border-radius: 10px;
  45.     padding: 0 20px 20px 20px;
  46.     margin-top: 20px;
  47.     display: inline-block;
  48.   }
  49.   button {
  50.     margin: 10px;
  51.   }
  52.   label {
  53.     display: block;
  54.     width: 80px;
  55.     padding: 5px;
  56.   }
  57.   label:hover {
  58.     cursor: pointer;
  59.     background-color: rgb(211, 244, 211);
  60.     border-radius: 5px;
  61.   }
  62.   #pAnswer {
  63.     background-color: lightgreen;
  64.     padding: 5px;
  65.   }
  66. </style>
运行一下

下拉列表

下拉列表包含一个 <select> 标记，其中包含 <option> 标记。

在 Vue 中使用下拉列表时，我们需要将 <select> 标记与 v-model 连接起来，并为 <option> 标记指定值：

实例

App.vue:

  1. <template>
  2.   <h1>Drop-down List in Vue</h1>
  3.   <form @submit.prevent="registerAnswer">
  4.     <label for="cars">Choose a car:</label>
  5.     <select  v-model="carSelected" id="cars">
  6.       <option disabled value="">Please select one</option>
  7.       <option>Volvo</option>
  8.       <option>Saab</option>
  9.       <option>Opel</option>
  10.       <option>Audi</option>
  11.     </select>
  12.     <br><br>
  13.     <input type="submit" value="Submit">
  14.   </form>
  15.   <div>
  16.     <h3>Submitted answer:</h3>
  17.     <p id="pAnswer">{{ inpValSubmitted }}</p>
  18.   </div>
  19. </template>
  21. <script>
  22. export default {
  23.   data() {
  24.     return {
  25.       carSelected: '',
  26.       inpValSubmitted: 'Not submitted yet'
  27.     }
  28.   },
  29.   methods: {
  30.     registerAnswer() {
  31.       if(this.carSelected) {
  32.         this.inpValSubmitted = this.carSelected;
  33.       }
  34.     }
  35.   }
  36. }
  37. </script>
  39. <style scoped>
  40.   div {
  41.     border: dashed black 1px;
  42.     border-radius: 10px;
  43.     padding: 0 20px 20px 20px;
  44.     margin-top: 20px;
  45.     display: inline-block;
  46.   }
  47.   button {
  48.     margin: 10px;
  49.   }
  50.   label {
  51.     width: 80px;
  52.     padding: 5px;
  53.   }
  54.   label:hover {
  55.     cursor: pointer;
  56.     background-color: rgb(211, 244, 211);
  57.     border-radius: 5px;
  58.   }
  59.   #pAnswer {
  60.     background-color: lightgreen;
  61.     padding: 5px;
  62.   }
  63. </style>
运行一下

多选列表

使用 <select> 标记中的 multiple 属性，下拉列表将展开，我们可以选择多个选项。若要选择多个选项，windows 用户必须按 'ctrl' 键，macOS 用户必须按下 'command' 键。

在 Vue 中使用 <select multiple> 时，我们需要将 <select> 标记与 v-model 连接起来，并为 <option> 标记赋值：

实例

App.vue:

  1. <template>
  2.   <h1>Select Multiple in Vue</h1>
  3.   <p>Depending on your operating system, use the 'ctrl' or the 'command' key to select multiple options.</p>
  4.   <form @submit.prevent="registerAnswer">
  5.     <label for="cars">Choose one or more cars:</label><br>
  6.     <select  v-model="carsSelected" id="cars" multiple>
  7.       <option>Volvo</option>
  8.       <option>Saab</option>
  9.       <option>Opel</option>
  10.       <option>Audi</option>
  11.       <option>Kia</option>
  12.     </select>
  13.     <button type="submit">Submit</button>
  14.   </form>
  15.   <div>
  16.     <h3>Submitted answer:</h3>
  17.     <p id="pAnswer">{{ inpValSubmitted }}</p>
  18.   </div>
  19. </template>
  21. <script>
  22. export default {
  23.   data() {
  24.     return {
  25.       carsSelected: [],
  26.       inpValSubmitted: 'Not submitted yet'
  27.     }
  28.   },
  29.   methods: {
  30.     registerAnswer() {
  31.       if(this.carsSelected) {
  32.         this.inpValSubmitted = this.carsSelected;
  33.       }
  34.     }
  35.   }
  36. }
  37. </script>
  39. <style scoped>
  40.   div {
  41.     border: dashed black 1px;
  42.     border-radius: 10px;
  43.     padding: 0 20px 20px 20px;
  44.     margin-top: 20px;
  45.     display: inline-block;
  46.   }
  47.   button, select {
  48.     margin: 10px;
  49.     display: block;
  50.   }
  51.   label {
  52.     width: 80px;
  53.     padding: 5px;
  54.   }
  55.   label:hover {
  56.     cursor: pointer;
  57.     background-color: rgb(211, 244, 211);
  58.     border-radius: 5px;
  59.   }
  60.   #pAnswer {
  61.     background-color: lightgreen;
  62.     padding: 5px;
  63.   }
  64. </style>
运行一下

只读表单输入

在表单输入上使用 v-model 会创建一个双向绑定，这意味着如果 Vue 数据实例发生更改，input-value 属性也会发生更改。对于只读表单输入，如 <input type="file">，不能从 Vue 数据实例更改 value 属性，因此我们不能使用 v-model。

对于只读表单输入，如 <input type="file">，我们需要使用 @change 来调用一个更新 Vue 数据实例的方法：

实例

App.vue:

  1. <template>
  2.   <h1>Input Type File</h1>
  3.   <form @submit.prevent="registerAnswer">
  4.     <label>Choose a file:
  5.       <input @change="updateVal" type="file">
  6.     </label>
  7.     <button type="submit">Submit</button>
  8.   </form>
  9.   <div>
  10.     <h3>Submitted answer:</h3>
  11.     <p id="pAnswer">{{ inpValSubmitted }}</p>
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   data() {
  18.     return {
  19.       fileInp: null,
  20.       inpValSubmitted: 'Not submitted yet'
  21.     }
  22.   },
  23.   methods: {
  24.     registerAnswer() {
  25.       if(this.fileInp) {
  26.         this.inpValSubmitted = this.fileInp;
  27.       }
  28.     },
  29.     updateVal(e) {
  30.       this.fileInp = e.target.value;
  31.     }
  32.   }
  33. }
  34. </script>
  36. <style scoped>
  37.   div {
  38.     border: dashed black 1px;
  39.     border-radius: 10px;
  40.     padding: 0 20px 20px 20px;
  41.     margin-top: 20px;
  42.     display: inline-block;
  43.   }
  44.   button {
  45.     margin: 10px;
  46.     display: block;
  47.   }
  48.   #pAnswer {
  49.     background-color: lightgreen;
  50.     padding: 5px;
  51.   }
  52. </style>
运行一下
提示：在上面的例子中，提交的文件名前面有一个文件路径 C:\fakepath\。这是为了防止恶意软件猜测用户的文件结构。

其他表单输入

使用上面提到的表单输入，我们必须为 value 属性提供一个值，但使用下面的表单输入时，用户会提供值：

  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="number">
  • <input type="password">
  • <input type="range">
  • <input type="search">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <textarea>

因为用户已经为这些类型的表单输入提供了值，所以我们在 Vue 中所需要做的就是用 v-model 将输入连接到数据属性。

下面是如何在 Vue 中将 <input type="range"> 使用：

实例

App.vue:

  1. <form @submit.prevent="registerAnswer">
  2.   <label>How tall are you?<br>
  3.     <input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm
  4.   </label>
  5.   <button type="submit">Submit</button>
  7. </form>
运行一下

这就是如何在 Vue 中使用 <input type="color">：

实例

App.vue:

  1. <form @submit.prevent="registerAnswer">
  2.   <label>Choose a color:
  3.     <input v-model="colorInp" type="color">
  4.   </label>
  5.   <button type="submit">Submit</button>
  6. </form>
运行一下

以下是如何在 Vue 中使用 <textarea>：

实例

App.vue:

  1. <form @submit.prevent="registerAnswer">
  2.   <label>
  3.     <p>What do you think about our product?</p>
  4.     <textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
  5.   </label>
  6.   <button type="submit">Submit</button>
  7. </form>
运行一下

在我们的 HTML 教程中了解更多关于不同类型的 HTML 表单输入 如何工作的原理。

Vue 路由
Vue 动画

分类导航

C 语言C++C#JavaPHPPYTHONGONode.jsPandasR 语言DjangoMatplotlibVB 教程ABAP 教程Fiori 教程汇编语言.NET Core 教程Fortran 教程ASP.NET Core 教程Vue 教程Numpy机器学习SciPy