Vue3组件事件用户信息卡练习
用户信息卡
题目要求
实现一个用户信息卡系统，包含以下功能：
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>