vue中添加与删除关键字搜索功能

下面是“vue中添加与删除关键字搜索功能”的完整攻略。

1.创建搜索框

首先，我们需要在页面上创建一个输入框，供用户输入搜索关键字。可以使用Vue中的v-model指令来实现双向数据绑定，将用户输入的关键字与Vue实例中的数据绑定起来。

示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="输入关键字搜索">
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  }
}
</script>

在上面的代码中，我们使用了v-model="keyword"来实现关键字的双向绑定。当用户输入关键字时，keyword的值会自动更新，反之亦然。

2.实现关键字搜索功能

接下来，我们需要在Vue实例中处理用户输入的关键字，并将其用于搜索匹配的数据项。可以使用Vue中的computed属性来实现搜索过滤功能。

示例代码：

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

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        { id: 1, name: 'Vue.js' },
        { id: 2, name: 'React.js' },
        { id: 3, name: 'Angular.js' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.name.includes(this.keyword)
      })
    }
  }
}
</script>

在上面的代码中，我们首先定义了一个list数组，其中包含了一些数据项。然后，在computed属性中，我们通过filter函数过滤数组中的数据项，只留下与关键字匹配的项。最后，在模板中使用v-for指令将匹配的数据项渲染到页面中。

3.添加删除关键字功能

最后，我们可以为搜索框添加一个“删除关键字”的功能，让用户能够方便地清空输入框中的内容。

示例代码：

<template>
  <div>
    <div>
      <input type="text" v-model="keyword" placeholder="输入关键字搜索">
      <button @click="clearKeyword">X</button>
    </div>
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        { id: 1, name: 'Vue.js' },
        { id: 2, name: 'React.js' },
        { id: 3, name: 'Angular.js' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.name.includes(this.keyword)
      })
    }
  },
  methods: {
    clearKeyword() {
      this.keyword = ''
    }
  }
}
</script>

在上面的代码中，我们为搜索框旁边添加了一个“X”按钮，当用户点击该按钮时，会触发clearKeyword方法，将关键字的值设置为空字符串，以达到清空输入框的效果。

总结

以上就是在Vue中添加与删除关键字搜索功能的完整攻略。在实际开发中，我们可以根据需求和业务场景进行相应的调整和优化。