vue实现搜索框查询功能
时间: 2023-06-18 15:03:46 浏览: 54
Vue实现搜索框查询功能可以通过以下步骤完成:
1. 在Vue组件中定义一个搜索框,通常使用`<input>`标签来实现,同时绑定一个`v-model`指令来实现双向数据绑定。
2. 在Vue组件的`data`属性中定义一个变量,用来保存搜索框中输入的关键字。
3. 在Vue组件的`methods`属性中定义一个方法,用来处理搜索功能。该方法通常会调用后端API来获取数据,并将获取到的数据保存在Vue组件的另一个变量中。同时,在调用API之前,需要将搜索框中的关键字作为参数传递给API。
4. 在Vue组件的模板中,使用`v-for`指令来迭代遍历保存数据的变量,并将数据显示在页面上。
以下是一个示例代码:
```
<template>
<div>
<input v-model="keyword" type="text" placeholder="请输入关键字" @input="search" />
<ul>
<li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
dataList: []
}
},
methods: {
search() {
// 调用API获取数据
// 使用axios库发送GET请求
axios.get('/api/search', {
params: {
keyword: this.keyword
}
}).then(res => {
// 将获取到的数据保存到dataList中
this.dataList = res.data
})
}
}
}
</script>
```
在上面的代码中,我们首先定义了一个搜索框,并使用`v-model`指令将搜索框中输入的关键字绑定到了Vue组件的`keyword`变量中。然后,在`methods`属性中定义了一个`search`方法,该方法会调用后端API获取数据,并将获取到的数据保存到Vue组件的`dataList`变量中。最后,在模板中使用`v-for`指令遍历迭代`dataList`变量,并将数据显示在页面上。