Vue.js 关键字查询功能是怎么实现的

Vue.js 可以通过计算属性和过滤器来实现关键字查询功能。

首先，你需要在 data 中定义一个包含所有数据的数组，并且定义一个用于存储关键字的变量。然后，在模板中添加一个输入框，用于输入关键字。在计算属性中，使用 filter 方法来过滤数组中与关键字匹配的项，并将过滤结果返回。

下面是一个简单的例子：

<template>
  <div>
    <input v-model="keyword" placeholder="输入关键字" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      items: [
        { id: 1, name: "apple" },
        { id: 2, name: "banana" },
        { id: 3, name: "orange" },
      ],
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter((item) => {
        return item.name.indexOf(this.keyword) !== -1;
      });
    },
  },
};
</script>

在上面的例子中，我们定义了一个 items 数组，其中包含了三个水果的名字。我们添加了一个 input 元素，用于输入关键字。在计算属性中，我们使用 filter 方法过滤出与关键字匹配的项，并将结果返回。在模板中，我们使用 v-for 指令循环渲染过滤后的结果。

这样，当用户输入关键字时，列表中只会显示与关键字匹配的项。