当青训营遇上码上掘金
1. 主题：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
2.引言
最近刚入门vue3，目前刚了解了与vue2的不同，报名字节青训营看到了「青训营 X 码上掘金」主题创作活动，就想着用vue3做一个小demo，熟悉一下vue3的代码格式，巩固之前所学过的知识点，毕竟好记性不如烂笔头（小编目前只学了setup()|ref|reactive|computed）
3. 思路
将名片分为头像区和信息区 头像区的图片居中 信息区展示名片信息 reactiuve定义了一个对象类型的响应式数据，可以将数据响应式动态渲染于页面 点击头像触发changeInfo()事件，展示第二人格名片内容并修改数据值 通过计算属性自定义类名修改样式 通过点击头像展示不同数据
4. 代码实现
- HTML部分
<div class="container" :class="{ 'active1': isOne, 'active2': isTwo }">
<div class="photo" @click="changeInfo">
<img
:src="winnie.photo"
alt=""
/>
</div>
<hr />
<div class="msg">
<ul>
<li>
<span>姓名:</span>
<p>{{ 淹没在代码里的蜗牛 }}</p >
</li>
<li>
<span>学校：</span>
<p>{{ 辽宁科技学院 }}</p >
</li>
<li>
<span>口头禅:</span>
<p>{{ 诶呀，运行呀 }}</p >
</li>
<li>
<span>最喜欢的食物:</span>
<p>{{ 好养，不挑食 }}</p >
</li>
</ul>
</div>
</div>
- CSS部分
width: 300px;
height: 500px;
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(rgb(245, 218, 46), rgb(247, 20, 111));
}
.photo {
text-align: center;
}
.photo img {
margin: 20px;
width: 120px;
height: 120px;
border-radius: 50%;
}
.msg {
margin-top: 30px;
}
span {
font-weight: 800;
}
.active1 {
background: linear-gradient(rgb(245, 218, 46), rgb(247, 20, 111));
}
.active2 {
background: linear-gradient(rgb(123, 195, 249), rgb(204, 146, 255));
}
- JS部分
let winnie = reactive({
});
function changeInfo() {
}
let isOne = computed (()=>{
});
let isTwo = computed(()=>{
});
return {
winnie,
changeInfo,
isOne,
isTwo,
};
}
