当前位置：首页 > VUE

vue任务表单实现指南

2026-01-23 15:27:44VUE

Vue 任务表单实现方法

表单基础结构 使用 Vue 的 v-model 实现数据双向绑定，创建任务表单的基础结构：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="task.title" placeholder="任务标题">
    <textarea v-model="task.description" placeholder="任务描述"></textarea>
    <select v-model="task.priority">
      <option value="low">低优先级</option>
      <option value="medium">中优先级</option>
      <option value="high">高优先级</option>
    </select>
    <button type="submit">提交</button>
  </form>
</template>

数据模型与提交处理 在 Vue 组件中定义数据模型和提交处理方法：

<script>
export default {
  data() {
    return {
      task: {
        title: '',
        description: '',
        priority: 'medium',
        completed: false
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('task-submitted', this.task)
      this.resetForm()
    },
    resetForm() {
      this.task = {
        title: '',
        description: '',
        priority: 'medium',
        completed: false
      }
    }
  }
}
</script>

表单验证增强 使用 Vuelidate 或 Vue 原生验证实现表单验证：

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    task: {
      title: { required, minLength: minLength(3) },
      description: { required }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        this.$emit('task-submitted', this.task)
      }
    }
  }
}

表单样式优化 添加基础样式提升表单可用性：

<style scoped>
form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

input, textarea, select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

高级功能扩展

vue任务表单实现指南