rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vue2

Browse Source
This commit is contained in:
rou
2026-03-26 21:45:32 +08:00
parent 7c0cbe1320
commit 2a65ba8c6a
7 changed files with 169 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
07-vue2/06-class-style-and-event/starter.html
View File

@@ -1,31 +1,66 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动态类名、样式和事件</title>
<style>
body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f8fb; }
.panel { max-width: 760px; margin: 0 auto; }
.card { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d8e4f3; cursor: pointer; transition: all .2s ease; }
.card.active { border-color: #2d6cdf; background: #eef4ff; }
.progress-track { height: 12px; margin-top: 16px; border-radius: 999px; background: #e6edf8; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #2d6cdf, #58a2ff); }
</style>
</head>
<body>
<section id="app" class="panel">
<article class="card" :class="{ active: isActive }" @click="toggleCard">
<h1>{{ title }}</h1>
<p>{{ isActive ? "当前卡片已激活" : "点击卡片激活它" }}</p>
<div class="progress-track">
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
</div>
<p>当前进度：{{ progress }}%</p>
</article>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./starter.js"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动态类名、样式和事件</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", sans-serif;
background: #f4f8fb;
}
.panel {
max-width: 760px;
margin: 0 auto;
}
.card {
padding: 24px;
border-radius: 18px;
background: #fff;
border: 1px solid #d8e4f3;
cursor: pointer;
transition: all .2s ease;
}
.card.active {
border-color: #2d6cdf;
background: #eef4ff;
}
.progress-track {
height: 12px;
margin-top: 16px;
border-radius: 999px;
background: #e6edf8;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #2d6cdf, #58a2ff);
}
</style>
</head>
<body>
<section id="app" class="panel">
<article class="card" :class="{ active: isActive }" @click="toggleCard">
<h1>{{ title }}</h1>
<p>{{ isActive ? "当前卡片已激活" : "点击卡片激活它" }}</p>
<div class="progress-track">
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
</div>
<p>当前进度：{{ progress }}%</p>
</article>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./starter.js"></script>
</body>
</html>

6
07-vue2/06-class-style-and-event/starter.js
View File

@@ -9,7 +9,13 @@ new Vue({
toggleCard() {
// 任务：
// 1. 切换 isActive
this.isActive = !this.isActive
// 2. 如果激活了，让 progress 增加到 80
if (this.isActive) {
this.progress = 80
} else {
this.progress = 35
}
// 3. 如果取消激活，让 progress 回到 35
},
},