vue实现全匹配搜索列表内容

下面是基于Vue实现全匹配搜索列表内容的完整攻略及示例说明：

1. 实现思路：

• 创建一个Vue实例
• 在data中定义一个数据列表，例如list: ['apple', 'banana', 'orange', 'pear', 'watermelon', 'grape']
• 在data中定义一个搜索关键字，例如keyword: ''
• 通过computed计算属性对数据列表进行过滤，得到一个新的数据列表
• 在页面中通过v-model实时绑定搜索关键字
• 在页面中通过v-for指令遍历过滤后的新的数据列表，渲染到页面中

2. 代码示例：

示例一：基本实现

下面是一个基本的示例，演示了如何通过Vue实现全匹配搜索列表内容：

<template>
  <div>
    <h3>搜索：</h3>
    <input type="text" v-model="keyword">
    <h3>结果：</h3>
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['apple', 'banana', 'orange', 'pear', 'watermelon', 'grape'],
      keyword: ''
    }
  },
  computed: {
    filteredList () {
      return this.list.filter(item => {
        return item.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1
      })
    }
  }
}
</script>

这个示例中，我们通过在computed中定义filteredList过滤计算属性，将过滤后的列表数据传递给页面进行展示。

示例二：带有debounce的搜索

下面是一个稍微复杂一些的示例，演示了如何在基本实现的基础上，加入debounce延迟搜索等功能：

<template>
  <div>
    <h3>搜索：</h3>
    <input type="text" v-model="keyword" @keyup="handleKeyup">
    <h3>结果：</h3>
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['apple', 'banana', 'orange', 'pear', 'watermelon', 'grape'],
      keyword: ''
    }
  },
  computed: {
    filteredList () {
      return this.list.filter(item => {
        return item.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1
      })
    }
  },
  methods: {
    handleKeyup: _.debounce(function () {
      console.log('trigger search...')
    }, 500)
  }
}
</script>

这个示例中，我们引入了lodash的debounce方法，并结合methods中的handleKeyup函数，实现了延迟搜索的效果。

3. 总结：

通过上面的两个示例，我们基本上掌握了如何通过Vue实现全匹配搜索列表内容。首先，我们需要在data中定义包含所有数据的列表，其次，在computed中定义一个filteredList过滤计算属性，在其中通过过滤方法对列表进行过滤。最后，在页面中使用v-model绑定一个搜索关键字，通过v-for遍历被过滤后的新的数据列表，将结果渲染到页面中。