vue create movie-app

const movies = [
  { title: 'Movie 1', year: 2020 },
  { title: 'Movie 2', year: 2019 },
  { title: 'Movie 3', year: 2021 },
  // ... 更多電影數(shù)據(jù)
];

<template>
  <div>
    <input
      type="text"
      v-model="searchTerm"
      placeholder="Search movies..."
    />
    <ul>
      <li v-for="movie in filteredMovies" :key="movie.title">
        {{ movie.title }} ({{ movie.year }})
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      movies: [...], // 電影數(shù)據(jù)數(shù)組
      searchTerm: '' // 搜索關(guān)鍵字
    };
  },
  computed: {
    filteredMovies() {
      // 使用計(jì)算屬性過(guò)濾電影數(shù)據(jù)
      return this.movies.filter(movie =>
        movie.title.toLowerCase().includes(this.searchTerm.toLowerCase())
      );
    }
  }
};
</script>

<template>
  <div id="app">
    <h1>Movie Search App</h1>
    <movie-list />
  </div>
</template>
<script>
import MovieList from './components/MovieList.vue';
export default {
  components: {
    MovieList
  }
};
</script>

npm run serve

<template>
  <div>
    <!-- 搜索框 -->
    <input
      type="text"
      v-model="searchTerm"
      placeholder="Search movies..."
    />
    <!-- 篩選條件
 -->
    <label>
      Year:
      <select v-model="selectedYear">
        <option value="">All</option>
        <option v-for="year in uniqueYears" :value="year">{{ year }}</option>
      </select>
    </label>
    <!-- 篩選按鈕 -->
    <button @click="filterMovies">Filter</button>
    <!-- 電影列表 -->
    <ul>
      <li v-for="movie in filteredMovies" :key="movie.title">
        {{ movie.title }} ({{ movie.year }})
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      movies: [...], // 電影數(shù)據(jù)數(shù)組
      searchTerm: '', // 搜索關(guān)鍵字
      selectedYear: '', // 選擇的年份
    };
  },
  computed: {
    filteredMovies() {
      // 使用計(jì)算屬性過(guò)濾電影數(shù)據(jù)
      let filtered = this.movies;
      if (this.searchTerm) {
        filtered = filtered.filter(movie =>
          movie.title.toLowerCase().includes(this.searchTerm.toLowerCase())
        );
      }
      if (this.selectedYear) {
        filtered = filtered.filter(movie => movie.year === parseInt(this.selectedYear));
      }
      return filtered;
    },
    uniqueYears() {
      // 計(jì)算屬性：獲取電影數(shù)據(jù)中的唯一年份列表
      const years = new Set(this.movies.map(movie => movie.year));
      return [''].concat(Array.from(years));
    },
  },
  methods: {
    filterMovies() {
      // 當(dāng)用戶(hù)點(diǎn)擊篩選按鈕時(shí)調(diào)用此方法
      // 更新電影列表
    },
  },
};
</script>

<template>
  <div id="app">
    <h1>Movie Search and Filter App</h1>
    <movie-list />
  </div>
</template>
<script>
import MovieList from './components/MovieList.vue';
export default {
  components: {
    MovieList
  }
};
</script>

npm run serve