vue查询关键字includes

在Vue.js中，如果你正在处理数据过滤（如表格或列表），可能会遇到需要根据用户输入的关键字进行搜索的情况。假设你有一个数组（通常是组件的data的一部分），你可以使用`includes()`方法配合v-bind或计算属性来实现在输入框变化时动态过滤内容。

举个例子：

<template>
  <input v-model="searchKeyword">
  <ul>
    <li v-for="(item, index) in filteredItems" :key="index">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry', 'Date'],
      searchKeyword: '',
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.toLowerCase().includes(this.searchKeyword.toLowerCase()));
    }
  }
};
</script>

在这个例子中，每当用户在输入框中输入关键词，`filteredItems`计算属性会被更新，只显示那些名称中包含用户输入的关键字的项。