当前位置：首页 > VUE

vue中表单实现

2026-02-19 13:23:34VUE

Vue 表单实现方法

双向数据绑定（v-model）

使用 v-model 指令实现表单元素与数据的双向绑定，适用于输入框、复选框、单选按钮等。

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

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

表单验证

可以通过计算属性、watch 或第三方库（如 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 re = /\S+@\S+\.\S+/;
      this.error = re.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 等UI库提供了丰富的表单组件和验证功能。

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

<script>
export default {
  data() {
    return {
      form: { name: '' },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        }
      });
    }
  }
}
</script>

文件上传

使用 <input type="file"> 结合 FormData 实现文件上传功能。

<template>
  <input type="file" @change="handleFileUpload">
  <button @click="uploadFile">上传</button>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileUpload(e) {
      this.file = e.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      // 这里使用axios示例
      axios.post('/upload', formData)
        .then(response => {
          console.log('上传成功', response);
        });
    }
  }
}
</script>

这些方法涵盖了Vue中表单实现的主要场景，可以根据具体需求选择合适的方式或组合使用。

vue中表单实现