Files
front-end-example/07-vue2/05-computed-and-watch/starter.js
charlie 3435848495 feat: add Vue2 exercises for dynamic styles, lifecycle methods, component communication, and course management dashboard
- Implement dynamic styles and event handling in Vue2 with a card component.
- Create lifecycle methods exercise to simulate async data loading and instance destruction.
- Develop a component communication exercise with props, events, and slots.
- Build a comprehensive course management dashboard with filtering, statistics, and component interactions.
2026-03-23 10:09:29 +08:00

27 lines
536 B
JavaScript

new Vue({
el: "#app",
data: {
keyword: "",
courses: [
{ id: 1, title: "Vue 实例入门" },
{ id: 2, title: "Vue 指令系统" },
{ id: 3, title: "组件通信实战" },
],
},
computed: {
filteredCourses() {
// 任务:返回过滤后的课程列表
return this.courses;
},
matchedCount() {
// 任务:返回 filteredCourses 的数量
return 0;
},
},
watch: {
keyword(newValue) {
// 任务:在控制台输出关键字变化
},
},
});