vue实现表单修改

Vue 表单修改实现方法

双向数据绑定

使用 v-model 指令实现表单与数据的双向绑定，适用于 input、select、textarea 等表单元素。

<template>
  <form>
    <input v-model="formData.username" placeholder="用户名">
    <input v-model="formData.password" type="password" placeholder="密码">
    <select v-model="formData.gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        gender: 'male'
      }
    }
  }
}
</script>

表单验证

结合 Vue 的计算属性或第三方库如 VeeValidate 实现表单验证。

<template>
  <form @submit.prevent="submitForm">
    <input 
      v-model="email" 
      :class="{ 'error': !isEmailValid }"
    >
    <span v-if="!isEmailValid">邮箱格式不正确</span>
    <button :disabled="!isFormValid">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  computed: {
    isEmailValid() {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return re.test(this.email)
    },
    isFormValid() {
      return this.isEmailValid
    }
  },
  methods: {
    submitForm() {
      if (this.isFormValid) {
        // 提交逻辑
      }
    }
  }
}
</script>

动态表单生成

根据数据动态渲染表单元素，适合需要灵活配置的表单场景。

<template>
  <form>
    <div v-for="(field, index) in formFields" :key="index">
      <label>{{ field.label }}</label>
      <component 
        :is="field.component" 
        v-model="formData[field.name]"
        v-bind="field.props"
      />
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        {
          label: '用户名',
          name: 'username',
          component: 'input',
          props: { type: 'text' }
        },
        {
          label: '性别',
          name: 'gender',
          component: 'select',
          props: {
            options: [
              { value: 'male', text: '男' },
              { value: 'female', text: '女' }
            ]
          }
        }
      ],
      formData: {}
    }
  }
}
</script>

表单重置与初始化

提供表单重置功能，或从 API 获取初始数据填充表单。

<template>
  <form>
    <input v-model="formData.username">
    <button @click="resetForm">重置</button>
    <button @click="loadInitialData">加载初始数据</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: ''
      },
      initialData: {
        username: '默认用户'
      }
    }
  },
  methods: {
    resetForm() {
      this.formData = { ...this.initialData }
    },
    async loadInitialData() {
      const response = await fetch('/api/user/1')
      this.formData = await response.json()
    }
  }
}
</script>

表单提交处理

处理表单提交事件，包括数据验证和异步提交。

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

<script>
export default {
  data() {
    return {
      formData: {
        email: ''
      },
      isLoading: false
    }
  },
  methods: {
    async handleSubmit() {
      if (!this.validateEmail()) return

      this.isLoading = true
      try {
        await this.$http.post('/api/submit', this.formData)
        this.$toast.success('提交成功')
      } catch (error) {
        this.$toast.error('提交失败')
      } finally {
        this.isLoading = false
      }
    },
    validateEmail() {
      // 验证逻辑
      return true
    }
  }
}
</script>

复杂表单结构

处理嵌套对象或数组类型的表单数据。

<template>
  <form>
    <div v-for="(user, index) in formData.users" :key="index">
      <input v-model="user.name">
      <input v-model="user.age">
      <button @click="removeUser(index)">删除</button>
    </div>
    <button @click="addUser">添加用户</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        users: [
          { name: '', age: '' }
        ]
      }
    }
  },
  methods: {
    addUser() {
      this.formData.users.push({ name: '', age: '' })
    },
    removeUser(index) {
      this.formData.users.splice(index, 1)
    }
  }
}
</script>

第三方表单组件库

使用 Element UI、Ant Design Vue 等 UI 库的表单组件。

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

<script>
export default {
  data() {
    return {
      formData: {
        username: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      // 提交逻辑
    }
  }
}
</script>