Vue.js 列表过滤：掌控数据的精妙艺术

2023-11-06 08:59:49

引言

在当今数据驱动的世界中，数据呈现是关键。Vue.js，作为一个轻量级且功能强大的 JavaScript 框架，提供了强大的工具，使我们能够以直观且用户友好的方式呈现数据。其中一项重要功能是列表过滤，它允许我们动态地筛选和显示列表中的数据，从而提供一个更集中的视图。

深入了解 Vue.js 列表过滤

列表过滤的基本原理是使用一个输入字段，用户可以在其中输入一个查询字符串。该查询字符串将被用来过滤列表中的数据，仅显示与查询匹配的行。

实现步骤

要实现 Vue.js 列表过滤，我们需要执行以下步骤：

获取输入框内容： 使用 Vue.js 的 v-model 指令将输入字段与一个数据属性绑定，该属性将存储用户输入的查询字符串。
根据输入内容过滤数据： 使用计算属性来动态地过滤列表中的数据。该计算属性应使用 filter() 数组方法，根据输入的查询字符串匹配数据项。

实例演示

为了更好地理解列表过滤的实际应用，让我们创建一个简单的示例：

<template>
  <div>
    <input v-model="query" type="text" placeholder="搜索">
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const list = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' },
      { id: 3, name: 'Mark' }
    ];

    const query = ref('');
    const filteredList = computed(() => {
      return list.filter(item => item.name.includes(query.value));
    });

    return {
      query,
      filteredList
    };
  }
};
</script>