创建一个编辑用户信息的vue页面字段有:用户名、出生年月日期型、学历下拉选择
<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>
原文地址: https://www.cveoy.top/t/topic/q8P 著作权归作者所有。请勿转载和采集!