用戶信息卡
題目要求
實現一個用戶信息卡系統，包含以下功能：
1.父組件收集用戶信息（姓名、年齡、班級）
2.子組件接收并展示用戶信息卡片
3.添加基本的數據驗證
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>用戶信息卡</title>
? ? <script src="./vue.global.js"></script>
? ? <style>
? ? ? ? .user-card {
? ? ? ? ? ? border: 1px solid #ddd;
? ? ? ? ? ? border-radius: 8px;
? ? ? ? ? ? padding: 15px;
? ? ? ? ? ? margin-top: 20px;
? ? ? ? ? ? width: 250px;
? ? ? ? ? ? box-shadow: 0 2px 4px rgba(0,0,0,0.1);
? ? ? ? }
? ? ? ? .input-group {
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? }
? ? ? ? label {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 60px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="app">
? ? ? ? <h2>用戶信息輸入</h2>
? ? ? ? <div class="input-group">
? ? ? ? ? ? <label >姓名：</label>
? ? ? ? ? ? <input type="text" v-model="user.name">
? ? ? ? </div>
? ? ? ? <div class="input-group">
? ? ? ? ? ? <label>年齡：</label>
? ? ? ? ? ? <input type="number" v-model="user.age">
? ? ? ? </div>
? ? ? ? <div class="input-group">
? ? ? ? ? ? <label>班級：</label>
? ? ? ? ? ? <input type="text" v-model="user.classl">
? ? ? ? </div>
? ? ? ? <user-card
? ? ? ? ? ? :name="user.name"
? ? ? ? ? ? :age="user.age"
? ? ? ? ? ? :classl="user.classl">
? ? ? ? </user-card>
? ? </div>
? ? <template id="user-card-template">
? ? ? ? <div class="user-card">
? ? ? ? ? ? <h3>用戶信息卡</h3>
? ? ? ? ? ? <p><strong>姓名：</strong>{{name||'未填寫'}}</p>
? ? ? ? ? ? <p><strong>年齡：</strong>{{age||'未填寫'}}</p>
? ? ? ? ? ? <p><strong>班級：</strong>{{classl||'未填寫'}}</p>
? ? ? ? ? ? <p v-if="age&&age >=18" style="color: green;">成年用戶</p>
? ? ? ? ? ? <p v-else-if="age&&age < 18" style="color: orange;">未成年用戶</p>
? ? ? ? </div>
? ? </template>
? ? <script>
? ? ? ? const UserCard={
? ? ? ? ? ? template:'#user-card-template',
? ? ? ? ? ? props:{
? ? ? ? ? ? ? ? name:{
? ? ? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? ? ? validator:value=>value.length<=10
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? age:{
? ? ? ? ? ? ? ? ? ? type:Number,
? ? ? ? ? ? ? ? ? ? validator:value=>value>0&&value<120
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? classl:{
? ? ? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? ? ?default:'未知班級'
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? const app=Vue.createApp({
? ? ? ? data(){
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? user:{
? ? ? ? ? ? ? ? ? ? name:'張三',
? ? ? ? ? ? ? ? ? ? age:25,
? ? ? ? ? ? ? ? ? ? classl:"XXX班"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? })
? ? app.component("UserCard",UserCard)
? ? app.mount('#app');
? ? </script>
</body>
</html>
