vue实现搜索框查询功能

Vue可以通过v-model指令双向绑定数据，结合computed计算属性进行搜索框查询功能的实现。以下是一个示例代码：

<template>
  <div>
    <input v-model="searchText" placeholder="请输入搜索关键字">
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      list: [
        { id: 1, title: 'Vue实战开发' },
        { id: 2, title: '深入浅出Vue.js' },
        { id: 3, title: 'Vue.js权威指南' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.title.indexOf(this.searchText) !== -1
      })
    }
  }
}
</script>

当用户在搜索框中输入关键字，computed属性会根据搜索框的值过滤出匹配的数据，从而渲染出相应的列表。