Vue实现数据筛选与搜索功能的示例代码

vue create movie-app

const movies = [
  { title: 'Movie 1', year: 2020 },
  { title: 'Movie 2', year: 2019 },
  { title: 'Movie 3', year: 2021 },
  // ... 更多电影数据
];

<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: [...], // 电影数据数组
      searchTerm: '' // 搜索关键字
    };
  },
  computed: {
    filteredMovies() {
      // 使用计算属性过滤电影数据
      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: [...], // 电影数据数组
      searchTerm: '', // 搜索关键字
      selectedYear: '', // 选择的年份
    };
  },
  computed: {
    filteredMovies() {
      // 使用计算属性过滤电影数据
      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() {
      // 计算属性：获取电影数据中的唯一年份列表
      const years = new Set(this.movies.map(movie => movie.year));
      return [''].concat(Array.from(years));
    },
  },
  methods: {
    filterMovies() {
      // 当用户点击筛选按钮时调用此方法
      // 更新电影列表
    },
  },
};
</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