菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue 教程

Vue 首页 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue:为什么、如何以及设置 Vue:第一个 SFC 页面 Vue:组件 Vue:Props Vue:v-for 组件 Vue:$emit() Vue:透传属性 Vue:作用域样式 Vue:局部组件 Vue:插槽 Vue:v-slot Vue:作用域插槽 Vue:动态组件 Vue:Teleport Vue:HTTP 请求 Vue:模板引用 Vue:生命周期钩子 Vue:Provide/Inject Vue:路由 Vue:表单输入 Vue:动画 Vue:带 v-for 的动画 Vue:构建 Vue:Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue 表单输入

我们在本教程的 Vue 表单v-model 页面中已经看到了一些关于表单输入的示例。

本页收集了更多 Vue 中的表单输入示例,例如单选按钮、复选框、下拉列表和普通文本输入字段。

单选按钮

属于同一组选择的单选按钮必须具有相同的 name,这样才能只选择一个单选按钮。

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

这是我们在 Vue 表单中使用单选按钮的方法

示例

App.vue:

<template>
  <h1>Radio Buttons in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <p>What is your favorite animal?</p>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> Cat
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> Dog
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> Turtle
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> Moose
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted choice:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inpVal: '',
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.inpVal) {
        this.inpValSubmitted = this.inpVal;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    display: block;
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>
运行示例 »

复选框

当复选框输入 (<input type="checkbox">) 与 v-model 连接到同一个数组时,选中的复选框的值将被收集到该数组中

示例

App.vue:

<template>
  <h1>Checkbox Inputs in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <p>What kinds of food do you like?</p>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Pizza"> Pizza
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Rice"> Rice
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Fish"> Fish
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Salad"> Salad
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeFoods: [],
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      this.inpValSubmitted = this.likeFoods;
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    display: block;
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>
运行示例 »

下拉列表

下拉列表由一个 <select> 标签和一个内部的 <option> 标签组成。

在 Vue 中使用下拉列表时,我们需要将 <select> 标签与 v-model 连接,并为 <option> 标签设置值

示例

App.vue:

<template>
  <h1>Drop-down List in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <label for="cars">Choose a car:</label>
    <select  v-model="carSelected" id="cars">
      <option disabled value="">Please select one</option>
      <option>Volvo</option>
      <option>Saab</option>
      <option>Opel</option>
      <option>Audi</option>
    </select>
    <br><br>
    <input type="submit" value="Submit">
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carSelected: '',
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.carSelected) {
        this.inpValSubmitted = this.carSelected;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>
运行示例 »

<select multiple>

使用 <select> 标签中的 multiple 属性,下拉列表会展开,我们可以选择多个选项。

要选择多个选项,Windows 用户必须按 'ctrl' 键,macOS 用户必须按 'command' 键。

在 Vue 中使用 <select multiple> 时,我们需要将 <select> 标签与 v-model 连接,并为 <option> 标签设置值

示例

App.vue:

<template>
  <h1>Select Multiple in Vue</h1>
  <p>Depending on your operating system, use the 'ctrl' or the 'command' key to select multiple options.</p>
  <form @submit.prevent="registerAnswer">
    <label for="cars">Choose one or more cars:</label><br>
    <select  v-model="carsSelected" id="cars" multiple>
      <option>Volvo</option>
      <option>Saab</option>
      <option>Opel</option>
      <option>Audi</option>
      <option>Kia</option>
    </select>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carsSelected: [],
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.carsSelected) {
        this.inpValSubmitted = this.carsSelected;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button, select {
    margin: 10px;
    display: block;
  }
  label {
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>
运行示例 »

只读表单输入

在表单输入上使用 v-model 会创建一个双向绑定,这意味着如果 Vue 的数据实例发生更改,输入 value 属性也会更改。

对于只读表单输入,例如 <input type="file">value 属性无法从 Vue 数据实例更改,因此我们无法使用 v-model

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

示例

App.vue:

<template>
  <h1>Input Type File</h1>
  <form @submit.prevent="registerAnswer">
    <label>Choose a file:
      <input @change="updateVal" type="file">
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileInp: null,
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.fileInp) {
        this.inpValSubmitted = this.fileInp;
      }
    },
    updateVal(e) {
      this.fileInp = e.target.value;
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
    display: block;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</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:

<form @submit.prevent="registerAnswer">
  <label>How tall are you?<br>
    <input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm
  </label>
  <button type="submit">Submit</button>
</form>
运行示例 »

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

示例

App.vue:

<form @submit.prevent="registerAnswer">
  <label>Choose a color: 
    <input v-model="colorInp" type="color">
  </label>
  <button type="submit">Submit</button>
</form>
运行示例 »

而这是如何在 Vue 中使用 <textarea>

示例

App.vue:

<form @submit.prevent="registerAnswer">
  <label>
    <p>What do you think about our product?</p> 
    <textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
  </label>
  <button type="submit">Submit</button>
</form>
运行示例 »

我们的 HTML 教程 中了解更多关于不同类型的 HTML 表单输入的工作方式。


Vue 练习

通过练习来测试自己

练习

填写缺失的代码,使输入与 'inpText' 数据属性实现双向绑定。

<template>
  <input type="text" >
  <p> {{ inpText }} </p>
</template>

<script>
  const app = Vue.createApp({
    data() {
      return {
        inpText: 'Initial text'
      }
    }
  })
  app.mount('#app')
</script>

开始练习



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持