vue实现快捷搜索标签

实现快捷搜索标签，可以使用 Vue 的 computed 计算属性和 v-for 指令。

首先，在 Vue 实例中定义一个数据 `tags`，存储所有的标签信息。

new Vue({
  el: '#app',
  data: {
    tags: [
      { id: 1, name: 'JavaScript' },
      { id: 2, name: 'Vue' },
      { id: 3, name: 'React' },
      { id: 4, name: 'Angular' },
      { id: 5, name: 'Node.js' },
      { id: 6, name: 'Express' },
      { id: 7, name: 'MongoDB' },
      { id: 8, name: 'MySQL' }
    ],
    searchText: ''
  },

然后，在模板中使用 `input` 标签实现搜索框，并使用 `v-model` 指令将搜索框的值与 `searchText` 数据进行双向绑定。

<div id="app">
  <input type="text" v-model="searchText" placeholder="输入关键字搜索">
  <ul>
    <li v-for="tag in filteredTags">{{ tag.name }}</li>
  </ul>
</div>

接下来，在 Vue 实例中定义一个计算属性 `filteredTags`，根据搜索框的值来过滤标签信息。

new Vue({
  // ...

  computed: {
    filteredTags() {
      return this.tags.filter(tag => tag.name.includes(this.searchText))
    }
  }
})

这样，当用户输入关键字时，`filteredTags` 计算属性会根据搜索框的值来过滤标签信息，然后使用 `v-for` 指令动态渲染符合条件的标签列表。

完整代码如下：

<div id="app">
  <input type="text" v-model="searchText" placeholder="输入关键字搜索">
  <ul>
    <li v-for="tag in filteredTags">{{ tag.name }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    tags: [
      { id: 1, name: 'JavaScript' },
      { id: 2, name: 'Vue' },
      { id: 3, name: 'React' },
      { id: 4, name: 'Angular' },
      { id: 5, name: 'Node.js' },
      { id: 6, name: 'Express' },
      { id: 7, name: 'MongoDB' },
      { id: 8, name: 'MySQL' }
    ],
    searchText: ''
  },
  computed: {
    filteredTags() {
      return this.tags.filter(tag => tag.name.includes(this.searchText))
    }
  }
})
</script>