<template>
  <div>
    <h1>编辑用户信息</h1>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="user.username" required>
      </div>
      <div>
        <label for="birthdate">出生年月:</label>
        <input type="date" id="birthdate" v-model="user.birthdate" required>
      </div>
      <div>
        <label for="education">学历:</label>
        <select id="education" v-model="user.education" required>
          <option value="">请选择</option>
          <option value="小学">小学</option>
          <option value="初中">初中</option>
          <option value="高中">高中</option>
          <option value="大学">大学</option>
          <option value="硕士">硕士</option>
          <option value="博士">博士</option>
        </select>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        username: '',
        birthdate: '',
        education: '',
      },
    }
  },
  methods: {
    submitForm() {
      console.log(this.user)
      // 提交表单逻辑
    },
  },
}
</script>
创建一个编辑用户信息的vue页面字段有:用户名、出生年月日期型、学历下拉选择

原文地址: https://www.cveoy.top/t/topic/q8P 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录