3435848495
- 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.
31 lines
634 B
JavaScript
31 lines
634 B
JavaScript
new Vue({
|
|
el: "#app",
|
|
data: {
|
|
keyword: "",
|
|
courses: [
|
|
{ id: 1, title: "Vue 实例入门" },
|
|
{ id: 2, title: "Vue 指令系统" },
|
|
{ id: 3, title: "组件通信实战" },
|
|
],
|
|
},
|
|
computed: {
|
|
filteredCourses() {
|
|
const value = this.keyword.trim().toLowerCase();
|
|
|
|
if (!value) {
|
|
return this.courses;
|
|
}
|
|
|
|
return this.courses.filter((item) => item.title.toLowerCase().includes(value));
|
|
},
|
|
matchedCount() {
|
|
return this.filteredCourses.length;
|
|
},
|
|
},
|
|
watch: {
|
|
keyword(newValue) {
|
|
console.log("关键字变化：", newValue);
|
|
},
|
|
},
|
|
});
|