vue实现表单填写

Vue 表单实现方法

双向数据绑定

使用 v-model 指令实现表单元素与数据的双向绑定，适用于输入框、单选、多选等场景。示例代码：

<template>
  <input v-model="username" placeholder="请输入用户名">
  <p>输入的内容：{{ username }}</p>
</template>

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

表单验证

通过计算属性或第三方库（如 VeeValidate）实现验证逻辑。基础验证示例：

<template>
  <input v-model="email" @blur="validateEmail">
  <span v-if="error">{{ error }}</span>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      error: ''
    }
  },
  methods: {
    validateEmail() {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.error = regex.test(this.email) ? '' : '邮箱格式不正确';
    }
  }
}
</script>

表单提交

使用 @submit.prevent 阻止默认提交行为并处理数据：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交数据：', this.formData);
      // 此处可添加AJAX请求
    }
  }
}
</script>

动态表单字段

通过 v-for 实现动态增减表单项：

<template>
  <div v-for="(item, index) in items" :key="index">
    <input v-model="item.value">
    <button @click="removeItem(index)">删除</button>
  </div>
  <button @click="addItem">新增字段</button>
</template>

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

第三方组件库

使用 Element UI 或 Ant Design Vue 等现成表单组件：

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submit">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: { name: '' },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>