计算属性中的值怎么赋值给data变量
时间: 2024-01-28 08:03:41 浏览: 36
计算属性是依赖于其他数据项计算出来的值,它们本身并不存储数据。如果想要将计算属性的值赋值给 data 变量,可以使用 `watch` 监听计算属性的变化,并将变化后的值赋给 data 变量。
例如,假设有一个计算属性 `result`,它依赖于两个数据项 `a` 和 `b` 计算出来,我们想要将 `result` 的值赋给一个 data 变量 `c`,则可以这样实现:
```html
<template>
<div>
a: <input v-model="a"><br>
b: <input v-model="b"><br>
result: {{ result }}<br>
c: {{ c }}
</div>
</template>
<script>
export default {
data() {
return {
a: 0,
b: 0,
c: 0
}
},
computed: {
result() {
return this.a + this.b
}
},
watch: {
result(val) {
this.c = val
}
}
}
</script>
```
上面的代码中,我们通过 `watch` 监听 `result` 的变化,并将变化后的值赋给 `c`。当 `a` 或 `b` 发生变化时,`result` 会重新计算,`watch` 监听到 `result` 的变化后,将变化后的值赋给 `c`,从而实现了将计算属性的值赋给 data 变量的功能。
相关推荐
![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)