vue实现在点击搜索后页面显示搜索后的内容
时间: 2024-02-23 15:12:20 浏览: 17
可以通过以下步骤实现:
1. 在页面上添加一个搜索框和一个搜索按钮,绑定相应的事件。
2. 在搜索按钮的点击事件中,发送请求到后端获取搜索结果。
3. 将搜索结果保存到组件的 data 中。
4. 在页面上添加一个列表,通过 v-for 指令遍历搜索结果,并显示在页面上。
具体的实现代码如下:
```html
<template>
<div>
<input type="text" v-model="keyword">
<button @click="search">搜索</button>
<ul>
<li v-for="item in searchResult">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
searchResult: []
}
},
methods: {
search() {
// 发送请求到后端,获取搜索结果
// 假设返回的数据格式为 { results: [{ title: 'xxx' }, { title: 'yyy' }] }
const results = { results: [{ title: 'xxx' }, { title: 'yyy' }] }
// 将搜索结果保存到组件的 data 中
this.searchResult = results.results
}
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)