举一个watch用法的例子
时间: 2024-05-02 14:17:48 浏览: 18
我会告诉你一个watch用法的例子:
在Vue.js中,我们经常使用watch来监听一个属性的变化,然后在属性变化时执行一些逻辑。例如,我们可以监听一个搜索框输入的关键词,当关键词发生变化时,我们可以向服务器发送一个请求获取相应的搜索结果。具体的代码示例如下:
```
<template>
<div>
<input v-model="keyword" placeholder="请输入关键词">
<ul>
<li v-for="item in searchResult">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
searchResult: []
}
},
watch: {
keyword(newVal, oldVal) {
// 发送请求获取搜索结果
this.getSearchResult(newVal)
}
},
methods: {
getSearchResult(keyword) {
// 发送请求获取搜索结果
// 这里省略请求的具体实现
// 模拟请求的结果
this.searchResult = [
`${keyword}的搜索结果1`,
`${keyword}的搜索结果2`,
`${keyword}的搜索结果3`
]
}
}
}
</script>
```
在上面的代码中,我们使用watch来监听keyword属性的变化,并在属性变化时调用getSearchResult方法获取相应的搜索结果。当用户在搜索框中输入关键词时,watch会自动监测到属性的变化,并执行相应的逻辑。
相关推荐
![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)