当前位置：首页 > VUE

vue实现可填写表单

2026-02-22 14:55:33VUE

Vue 实现可填写表单的方法

数据绑定与表单控件

使用 v-model 实现表单数据的双向绑定，适用于 input、textarea、select 等表单元素。示例代码：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" placeholder="姓名" type="text">
    <textarea v-model="formData.description" placeholder="描述"></textarea>
    <select v-model="formData.gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        description: '',
        gender: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.formData);
    }
  }
}
</script>

表单验证

通过计算属性或第三方库（如 VeeValidate）实现表单验证。以下为手动验证示例：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.email" placeholder="邮箱" type="email">
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: { email: '' },
      errors: { email: '' }
    }
  },
  computed: {
    isValid() {
      return !this.errors.email && this.formData.email;
    }
  },
  watch: {
    'formData.email'(newVal) {
      this.errors.email = /^\w+@\w+\.\w+$/.test(newVal) ? '' : '邮箱格式错误';
    }
  }
}
</script>

动态表单字段

通过 v-for 实现动态增减表单字段。示例代码：

<template>
  <form>
    <div v-for="(item, index) in dynamicFields" :key="index">
      <input v-model="item.value" placeholder="动态字段">
      <button @click="removeField(index)">删除</button>
    </div>
    <button @click="addField">添加字段</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      dynamicFields: [{ value: '' }]
    }
  },
  methods: {
    addField() {
      this.dynamicFields.push({ value: '' });
    },
    removeField(index) {
      this.dynamicFields.splice(index, 1);
    }
  }
}
</script>

表单提交与异步处理

结合 axios 或其他 HTTP 库处理表单提交：

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/submit', this.formData);
      console.log('提交成功:', response.data);
    } catch (error) {
      console.error('提交失败:', error);
    }
  }
}