<template>
<div>
<ul class="input_list">
<li>姓名:<a-input v-model:value="userinfo.username"></a-input></li>
<li>年龄:<a-input v-model:value="userinfo.age"></a-input></li>
<li>
性别:
<a-radio-group v-model:value="userinfo.sex">
<a-radio value="男">男</a-radio>
<a-radio value="女">女</a-radio>
</a-radio-group>
</li>
<li>
爱好:
<span v-for="(item, index) in userinfo.hobbies" :key="index">
<a-checkbox v-model:checked="item.checked">{{
item.label
}}</a-checkbox>
</span>
</li>
<li>
城市:
<a-select
v-model:value="userinfo.selectedCity"
mode="tags"
style="width: 300px"
placeholder="选择城市"
:options="userinfo.options"
>
</a-select>
</li>
<li>
生日:
<a-date-picker v-model:value="userinfo.birthday" @change="pickerChange" />
</li>
</ul>
{{ userinfo }}
</div>
</template>
<script>
import { defineComponent } from "vue";
import moment from 'moment';
const dateFormat = "YYYY-MM-DD";
export default defineComponent({
data() {
return {
userinfo: {
username: "",
age: "",
sex: "男",
hobbies: [
{ label: "吃饭", checked: true },
{ label: "睡觉", checked: true },
{ label: "写代码", checked: false },
],
options: [
{ value: "北京" },
{ value: "上海" },
{ value: "广州" },
{ value: "深圳" },
],
selectedCity: ["北京"],
birthday: moment('2021-01-03', dateFormat),
},
};
},
methods: {
pickerChange(e) {
if (!e) return;
var oDate = new Date(e._d);
console.log(oDate.getTime());
},
},
});
</script>
<style lang="scss">
ul {
list-style: none;
}
.input_list {
padding: 10px;
li {
margin-bottom: 15px;
& > input {
width: 400px !important;
}
}
}
</style>