Vue.js 表单

原创于 2025-08-11 06:04:50 发布 · 360 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

Vue.js 表单

引言

Vue.js 作为一种流行的前端框架，被广泛应用于开发单页应用程序。在用户交互中，表单是不可或缺的元素。本文将深入探讨 Vue.js 中表单的使用方法，包括基本概念、表单绑定、验证、处理表单提交等，旨在帮助开发者更好地理解和运用 Vue.js 表单。

基本概念

在 Vue.js 中，表单数据通常存储在组件的 data 属性中。每个表单项都可以绑定一个 v-model 指令，该指令可以轻松地将输入框、文本域、单选按钮等表单元素与数据模型进行双向绑定。

数据绑定

<template>
  <div>
    <input type="text" v-model="username">
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>

在上述代码中，v-model="username" 将输入框的值与 username 数据属性进行双向绑定。当用户输入内容时，username 数据属性会自动更新。

表单元素

Vue.js 支持多种表单元素，包括：

<input>：输入框，支持文本、密码、数字等类型。
<select>：下拉列表。
<textarea>：多行文本输入框。
<checkbox>：复选框。
<radio>：单选按钮。

表单绑定

在 Vue.js 中，可以通过 v-model 指令将表单元素与数据模型进行绑定。以下是一些常见的绑定示例：

文本输入

<template>
  <div>
    <input type="text" v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

选择框

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option v-for="item in items" :value="item">{{ item }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      items: ['选项1', '选项2', '选项3']
    }
  }
}
</script>

复选框

<template>
  <div>
    <input type="checkbox" v-model="checked" id="checkbox">
    <label for="checkbox">{{ checked ? '选中' : '未选中' }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

单选按钮

<template>
  <div>
    <label>
      <input type="radio" v-model="radio" value="选项1"> 选项1
    </label>
    <label>
      <input type="radio" v-model="radio" value="选项2"> 选项2
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: '选项1'
    }
  }
}
</script>

表单验证

在表单提交时，进行验证是非常有必要的。Vue.js 提供了 v-validate 指令，用于对表单元素进行验证。

安装和配置

首先，需要安装 vue-validate 插件：

npm install vue-validate --save

然后，在 Vue 实例中引入并使用：

import Vue from 'vue'
import VeeValidate from 'vue-validate'

Vue.use(VeeValidate)

验证示例

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input v-validate="'required|max:10'" name="username" v-model="username">
      <span>{{ errors.first('username') }}</span>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    submitForm() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          // 验证成功，执行提交逻辑
        } else {
          // 验证失败，显示错误信息
        }
      })
    }
  }
}
</script>

在上述代码中，v-validate="'required|max:10'" 用于对 username 进行验证，要求必填且长度不超过 10 个字符。

表单提交

在表单提交时，需要处理用户输入的数据。以下是一个简单的示例：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    submitForm() {
      console.log('提交的数据：', this.username)
    }
  }
}
</script>

在上述代码中，当用户点击提交按钮时，submitForm 方法会被调用，并在控制台输出用户输入的数据。