vue实现每次点击搜索后,页面更新显示搜索后的内容
时间: 2024-02-23 16:12:20 浏览: 17
如果你想实现每次点击搜索后,页面更新显示搜索后的内容,你可以在每次搜索后,将搜索结果保存到组件的 data 中,然后通过 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>
```
上面的代码中,当用户点击搜索按钮后,会调用 search 方法,发送请求到后端获取搜索结果,并将搜索结果保存到组件的 data 中的 searchResult 属性中。在页面上,通过 v-for 指令遍历 searchResult 数组,来实现搜索结果的展示。每次搜索后,只需要更新 searchResult 数组就可以实现页面的更新。
相关推荐
![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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)