103 lines
4.4 KiB
HTML
103 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vue个人资料卡片 - 学习示例</title>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="container">
|
|
<h1>{{ title }}</h1>
|
|
|
|
<!-- 个人资料卡片 -->
|
|
<div class="profile-card" :class="{ 'dark-theme': isDarkTheme }">
|
|
<div class="profile-header">
|
|
<img :src="profile.avatar" :alt="profile.name + '的头像'" class="avatar">
|
|
<h2>{{ profile.name }}</h2>
|
|
<p class="title">{{ profile.title }}</p>
|
|
</div>
|
|
|
|
<div class="profile-info">
|
|
<div class="info-item">
|
|
<strong>年龄:</strong> {{ profile.age }}岁
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>城市:</strong> {{ profile.city }}
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>邮箱:</strong> {{ profile.email }}
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>技能:</strong>
|
|
<span v-for="skill in profile.skills" :key="skill" class="skill-tag">
|
|
{{ skill }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="profile-bio">
|
|
<h3>个人简介</h3>
|
|
<p>{{ profile.bio }}</p>
|
|
</div>
|
|
|
|
<div class="profile-actions">
|
|
<button @click="toggleEdit" class="btn btn-primary">
|
|
{{ isEditing ? '保存' : '编辑资料' }}
|
|
</button>
|
|
<button @click="toggleTheme" class="btn btn-secondary">
|
|
{{ isDarkTheme ? '浅色主题' : '深色主题' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 编辑表单 -->
|
|
<div v-if="isEditing" class="edit-form" :class="{ 'dark-theme': isDarkTheme }">
|
|
<h3>编辑个人资料</h3>
|
|
<div class="form-group">
|
|
<label>姓名:</label>
|
|
<input v-model="editProfile.name" type="text" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>职位:</label>
|
|
<input v-model="editProfile.title" type="text" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>年龄:</label>
|
|
<input v-model.number="editProfile.age" type="number" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>城市:</label>
|
|
<input v-model="editProfile.city" type="text" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>邮箱:</label>
|
|
<input v-model="editProfile.email" type="email" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>个人简介:</label>
|
|
<textarea v-model="editProfile.bio" class="form-textarea"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 学习提示 -->
|
|
<div class="learning-tips" :class="{ 'dark-theme': isDarkTheme }">
|
|
<h3>🎓 Vue学习要点</h3>
|
|
<ul>
|
|
<li><strong>数据绑定:</strong> 使用 {{ '{{ }}' }} 显示数据</li>
|
|
<li><strong>属性绑定:</strong> 使用 :src, :class 等绑定属性</li>
|
|
<li><strong>事件处理:</strong> 使用 @click 处理点击事件</li>
|
|
<li><strong>条件渲染:</strong> 使用 v-if 控制元素显示</li>
|
|
<li><strong>列表渲染:</strong> 使用 v-for 循环显示数组</li>
|
|
<li><strong>双向绑定:</strong> 使用 v-model 绑定表单输入</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|