98 lines
2.7 KiB
JavaScript
98 lines
2.7 KiB
JavaScript
Vue.component("level-badge", {
|
|
props: {
|
|
level: {
|
|
type: String,
|
|
default: "基础",
|
|
},
|
|
},
|
|
template: `<span class="badge">{{ level }}</span>`,
|
|
});
|
|
|
|
const CourseItem = {
|
|
props: {
|
|
course: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
template: `
|
|
<article class="course-card" :class="{ 'is-done': course.finished }">
|
|
<div class="meta">
|
|
<level-badge :level="course.level"></level-badge>
|
|
<strong>{{ course.title }}</strong>
|
|
</div>
|
|
<p>{{ course.finished ? "当前已完成" : "当前学习中" }}</p>
|
|
<button type="button" @click="$emit('toggle', course.id)">
|
|
<slot name="action">操作</slot>
|
|
</button>
|
|
</article>
|
|
`,
|
|
};
|
|
|
|
new Vue({
|
|
el: "#app",
|
|
components: {
|
|
CourseItem,
|
|
},
|
|
data: {
|
|
keyword: "",
|
|
statusFilter: "all",
|
|
courses: [
|
|
{ id: 1, title: "Vue 实例基础", finished: true, level: "基础" },
|
|
{ id: 2, title: "模板语法与指令", finished: false, level: "基础" },
|
|
{ id: 3, title: "组件通信实战", finished: false, level: "进阶" },
|
|
{ id: 4, title: "生命周期和异步", finished: true, level: "进阶" },
|
|
],
|
|
},
|
|
computed: {
|
|
filteredCourses() {
|
|
// 任务：
|
|
// 1. 先按 statusFilter 过滤
|
|
// 2. 再按 keyword 过滤标题
|
|
let value = this.keyword.trim().toUpperCase()
|
|
let a
|
|
if (this.statusFilter === "all") {
|
|
a = this.courses.filter(item => item.title.toUpperCase().includes(value))
|
|
} else if (this.statusFilter === "done") {
|
|
const b = this.courses.filter(item => item.finished === true)
|
|
a = b.filter(item => item.title.toUpperCase().includes(value))
|
|
} else if (this.statusFilter === "doing") {
|
|
const b = this.courses.filter(item => item.finished === false)
|
|
a = b.filter(item => item.title.toUpperCase().includes(value))
|
|
}
|
|
return a
|
|
},
|
|
totalCount() {
|
|
return this.courses.length;
|
|
},
|
|
finishedCount() {
|
|
// 任务：返回已完成课程数量
|
|
const b = this.courses.filter(item => item.finished === true)
|
|
return b.length
|
|
},
|
|
visibleCount() {
|
|
// 任务：返回当前筛选后的数量
|
|
const a = this.filteredCourses
|
|
return a.length;
|
|
},
|
|
},
|
|
watch: {
|
|
keyword(newValue) {
|
|
// 任务：在控制台输出关键字变化
|
|
console.log(`关键词：${newValue}`);
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
toggleCourse(courseId) {
|
|
// 任务：根据 courseId 切换 finished
|
|
const a = this.courses.find(item => item.id === courseId)
|
|
a.finished = !a.finished
|
|
},
|
|
focusSearch() {
|
|
// 任务：通过 ref 聚焦输入框
|
|
this.$refs.searchInput.focus()
|
|
},
|
|
},
|
|
});
|