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

72
07-vue2/05-computed-and-watch/starter.html
View File

@@ -1,28 +1,50 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>computed 和 watch</title>
<style>
body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f7f9fd; }
.panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d9e2f0; }
input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #ccd7e9; }
</style>
</head>
<body>
<section id="app" class="panel">
<h1>课程搜索</h1>
<input v-model="keyword" type="text" placeholder="输入关键字" />
<p>匹配数量：{{ matchedCount }}</p>
<ul>
<li v-for="item in filteredCourses" :key="item.id">
{{ item.title }}
</li>
</ul>
</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>computed 和 watch</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", sans-serif;
background: #f7f9fd;
}
.panel {
max-width: 760px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #fff;
border: 1px solid #d9e2f0;
}
input {
width: 100%;
padding: 12px;
border-radius: 12px;
border: 1px solid #ccd7e9;
}
</style>
</head>
<body>
<section id="app" class="panel">
<h1>课程搜索</h1>
<input v-model="keyword" type="text" placeholder="输入关键字" />
<p>匹配数量：{{ matchedCount }}</p>
<ul>
<li v-for="item in filteredCourses" :key="item.id">
{{ item.title }}
</li>
</ul>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./starter.js"></script>
</body>
</html>

7
07-vue2/05-computed-and-watch/starter.js
View File

@@ -11,16 +11,19 @@ new Vue({
computed: {
filteredCourses() {
// 任务：返回过滤后的课程列表
return this.courses;
const value = this.keyword.trim().toUpperCase()
return this.courses.filter(item => item.title.toUpperCase().includes(value))
},
matchedCount() {
// 任务：返回 filteredCourses 的数量
return 0;
return this.filteredCourses.length;
},
},
watch: {
keyword(newValue) {
// 任务：在控制台输出关键字变化
console.log(`筛选关键词：${newValue}`);
},
},
});