计算属性监听怎么用,例子
时间: 2024-02-17 19:25:31 浏览: 33
计算属性的监听可以通过watch属性来实现。在Vue实例中,可以定义一个watch对象,其中的属性名是要监听的数据属性,属性值是一个函数,用于处理数据属性变化时的逻辑。下面是一个例子:
```javascript
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
```
在上面的例子中,我们定义了一个Vue实例vm,其中有三个数据属性:firstName、lastName和fullName。我们通过watch属性来监听firstName和lastName的变化。当firstName发生变化时,watch中的firstName函数会被调用,将新的firstName和当前的lastName拼接起来赋值给fullName。同样地,当lastName发生变化时,watch中的lastName函数会被调用,将当前的firstName和新的lastName拼接起来赋值给fullName。
这样,每当firstName或lastName发生变化时,fullName都会被更新。
#### 引用[.reference_title]
- *1* *2* *3* [一文解决Vue中的计算属性和监听属性](https://blog.csdn.net/zag666/article/details/119655096)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![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)