当青训营遇上码上掘金
1. 主题：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
2. 展示
3. 引言
最近刚入门vue3，目前刚了解了与vue2的不同，报名字节青训营看到了「青训营 X 码上掘金」主题创作活动，就想着用vue3做一个小demo，熟悉一下vue3的代码格式，巩固之前所学过的知识点，毕竟好记性不如烂笔头（小编目前只学了setup()|ref|reactive|computed）
4. 思路
- 将名片分为头像区和信息区
- 头像区的图片居中
- 信息区展示名片信息
reactiuve定义了一个对象类型的响应式数据，可以将数据响应式动态渲染于页面- 点击头像触发
changeInfo()事件，展示第二人格名片内容并修改数据值 - 通过计算属性自定义类名修改样式
- 通过点击头像展示不同数据
5. 代码实现
JS部分核心代码
- html部分
<h1 style="text-align: center; color: rgb(247, 20, 111);">点击头像，切换熊格</h1>
<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>{{ winnie.name }}</p>
</li>
<li>
<span>早晨第一句话：</span>
<p>{{ winnie.talk }}</p>
</li>
<li>
<span>口头禅:</span>
<p>{{ winnie.petPhrase }}</p>
</li>
<li>
<span>最喜欢的食物:</span>
<p>{{ winnie.food }}</p>
</li>
</ul>
</div>
</div>
- css部分
.container {
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部分
setup() {
let winnie = reactive({
});
function changeInfo() {
}
let isOne = computed (()=>{
});
let isTwo = computed(()=>{
});
return {
winnie,
changeInfo,
isOne,
isTwo,
};
}
