vue.js关键字过滤

Vue.js是一种流行的JavaScript框架，用于构建用户界面。关键字过滤是Vue.js中的一个常见功能，用于在列表或表格中根据用户输入的关键字来过滤数据。

在Vue.js中实现关键字过滤可以通过以下步骤：
1. 在Vue实例的data属性中定义一个用于存储原始数据的数组，例如`items`。
2. 在Vue实例的data属性中定义一个用于存储过滤后数据的数组，例如`filteredItems`。
3. 在Vue实例的methods属性中定义一个方法，例如`filterItems`，用于根据关键字过滤数据。
4. 在模板中使用`v-model`指令将用户输入的关键字绑定到Vue实例的一个属性上，例如`keyword`。
5. 使用计算属性或侦听器来监听关键字的变化，并在变化时调用`filterItems`方法进行数据过滤。
6. 在模板中使用`v-for`指令遍历`filteredItems`数组，并展示过滤后的数据。

下面是一个简单的示例代码：

<template>
  <div>
    <input type="text" 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' }
      ],
      filteredItems: []
    };
  },
  methods: {
    filterItems() {
      this.filteredItems = this.items.filter(item => {
        return item.name.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  },
  watch: {
    keyword() {
      this.filterItems();
    }
  }
};
</script>

在上述示例中，用户输入的关键字会触发`keyword`属性的变化，然后通过计算属性或侦听器调用`filterItems`方法进行数据过滤，最终展示过滤后的数据。