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);
    },
  },
});