vue.js搜索框实现

实现一个简单的Vue.js搜索框可以按照以下步骤进行：

1. 在Vue.js的模板中添加一个输入框和一个按钮：

<template>
  <div>
    <input type="text" v-model="searchTerm">
    <button @click="search">搜索</button>
  </div>
</template>

2. 在Vue.js的数据中定义一个变量来存储搜索关键字：

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

3. 添加一个点击按钮时触发的函数来处理搜索逻辑：

<script>
export default {
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    search() {
      // 处理搜索逻辑
      console.log('搜索关键字：', this.searchTerm)
    }
  }
}
</script>

4. 在search函数中可以实现搜索的具体逻辑，例如向后端发送请求获取搜索结果：

<script>
export default {
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    async search() {
      // 向后端发送搜索请求
      const results = await fetch(`/search?term=${this.searchTerm}`)
        .then(response => response.json())
      console.log('搜索结果：', results)
    }
  }
}
</script>

以上就是一个简单的Vue.js搜索框的实现。当用户在输入框中输入关键字并点击搜索按钮时，将会触发search函数，处理搜索逻辑并输出结果。