当前位置：首页 > VUE

vue快速实现表单

2026-02-11 05:15:32VUE

vue快速实现表单

使用v-model双向绑定

通过v-model指令快速绑定表单元素与数据，适用于input、textarea、select等元素。在data中定义初始值，表单修改时会自动同步到数据。

<template>
  <input v-model="username" placeholder="用户名">
  <textarea v-model="description"></textarea>
  <select v-model="selectedOption">
    <option value="A">选项A</option>
    <option value="B">选项B</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      description: '',
      selectedOption: 'A'
    }
  }
}
</script>

表单验证

结合Vuelidate或vee-validate库实现实时验证。以Vuelidate为例，先安装依赖后定义验证规则。

npm install vuelidate

<template>
  <input v-model="email" @blur="$v.email.$touch()">
  <span v-if="$v.email.$error">请输入有效邮箱</span>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'
export default {
  data() {
    return { email: '' }
  },
  validations: {
    email: { required, email }
  }
}
</script>

表单提交处理

通过@submit.prevent阻止默认提交行为，在methods中定义提交逻辑。可结合async/await处理异步请求。

<template>
  <form @submit.prevent="handleSubmit">
    <!-- 表单内容 -->
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('/api/submit', this.formData)
        console.log(response.data)
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

动态表单生成

通过v-for渲染动态表单字段，适合字段数量不固定的场景。每个字段可单独绑定到数组或对象中的属性。

<template>
  <div v-for="(field, index) in dynamicFields" :key="index">
    <input v-model="field.value" :placeholder="field.label">
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicFields: [
        { label: '字段1', value: '' },
        { label: '字段2', value: '' }
      ]
    }
  }
}
</script>

表单组件封装

将常用表单控件封装为可复用的组件，通过props接收配置，通过$emit触发事件。例如封装一个带标签和验证的输入框。

vue快速实现表单

<template>
  <div>
    <label>{{ label }}</label>
    <input 
      :value="value"
      @input="$emit('input', $event.target.value)"
      :type="type">
    <span v-if="error" class="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    label: String,
    type: {
      type: String,
      default: 'text'
    },
    error: String
  }
}
</script>