在 Vue 中过滤列表

Vue 2月前 67

Vue 是一款流行的 JavaScript 框架，它提供了很多方便的工具来处理数据和渲染视图。其中一个常见的任务是在 Vue 中过滤列表。本文将介绍如何使用 Vue 实现列表过滤功能，并提供一些实例代码。

列表过滤是指根据特定条件筛选出列表中的某些项，例如，根据关键词搜索、按照日期排序、按照价格范围筛选等。在 Vue 中，我们可以使用计算属性和过滤器来实现列表过滤功能。

计算属性

计算属性是 Vue 中的一个重要特性，它允许我们定义一个基于其他数据计算得出的属性。我们可以在计算属性中使用 JavaScript 代码来实现列表过滤。例如，假设我们有一个包含商品信息的列表，我们想根据价格范围来筛选出符合条件的商品：

<template>
  <div>
    <input v-model="minPrice" type="text" placeholder="最低价格">
    <input v-model="maxPrice" type="text" placeholder="最高价格">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }} - {{ item.price }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        { id: 3, name: '商品C', price: 300 },
        { id: 4, name: '商品D', price: 400 },
      ],
      minPrice: '',
      maxPrice: '',
    };
  },
  computed: {
    filteredItems() {
      const min = parseInt(this.minPrice);
      const max = parseInt(this.maxPrice);
      if (isNaN(min) && isNaN(max)) {
        return this.items;
      } else if (isNaN(min)) {
        return this.items.filter(item => item.price <= max);
      } else if (isNaN(max)) {
        return this.items.filter(item => item.price >= min);
      } else {
        return this.items.filter(item => item.price >= min && item.price <= max);
      }
    },
  },
};
</script>

在上面的代码中，我们使用了两个输入框来输入最低价格和最高价格，然后在计算属性 filteredItems 中根据这两个值来筛选出符合条件的商品。如果两个输入框都没有输入值，则显示全部商品；如果只输入了最低价格，则只显示价格大于等于最低价格的商品；如果只输入了最高价格，则只显示价格小于等于最高价格的商品；如果两个输入框都输入了值，则只显示价格在最低价格和最高价格之间的商品。

过滤器

过滤器是 Vue 中的另一个重要特性，它允许我们定义一个可以重复使用的文本转换函数。我们可以在过滤器中使用 JavaScript 代码来实现列表过滤。例如，假设我们有一个包含文章列表的页面，我们想根据关键词来搜索文章：

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="搜索关键词">
    <ul>
      <li v-for="item in items" :key="item.id">
        <h2>{{ item.title | highlight(keyword) }}</h2>
        <p>{{ item.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: '文章A', content: '这是一篇关于Vue的文章。' },
        { id: 2, title: '文章B', content: '这是一篇关于React的文章。' },
        { id: 3, title: '文章C', content: '这是一篇关于Angular的文章。' },
        { id: 4, title: '文章D', content: '这是一篇关于JavaScript的文章。' },
      ],
      keyword: '',
    };
  },
  filters: {
    highlight(value, keyword) {
      const regex = new RegExp(keyword, 'gi');
      return value.replace(regex, '<span class="highlight">$&</span>');
    },
  },
};
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

在上面的代码中，我们使用了一个输入框来输入关键词，然后在模板中使用过滤器 highlight 来根据关键词高亮显示文章标题。过滤器接受两个参数，第一个参数是要过滤的值，第二个参数是关键词。我们在过滤器中使用了 JavaScript 的 RegExp 对象来创建一个正则表达式，然后使用 replace 方法来将匹配的关键词用 <span> 标签包裹起来，并添加一个 CSS 类名来设置高亮样式。