vue2 中的 computed
时间: 2024-05-22 09:09:24 浏览: 10
在Vue2中,计算属性是一种计算新属性值的便捷方式。计算属性将基于现有数据计算出一个新的属性值,并将其设置为Vue实例的响应式属性之一。计算属性是基于它们的依赖项进行缓存的,只有当依赖项发生更改时才会重新计算。这使得计算属性能更高效地处理复杂的计算。
以下是一个计算属性的范例:
```HTML
<template>
<div>
<p>First Name: {{ firstName }}</p>
<p>Last Name: {{ lastName }}</p>
<p>Full Name: {{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}
</script>
```
在此范例中,fullName计算属性基于firstName和lastName数据计算而来。因此,每次firstName或lastName数据更改时,fullName都会被重新计算。fullName具有getter函数,但不具有setter函数。这意味着fullName是只读的,不能通过Vue实例直接更改。
相关问题
vue2中computed的使用
在Vue2中,computed是一种计算属性,它可以根据已有的数据计算出一个新的值,并且这个新的值会被缓存起来,只有当依赖的数据发生变化时才会重新计算。computed可以像普通属性一样在模板中使用,也可以在Vue实例中通过this访问。
computed的使用方法如下:
```
<template>
<div>
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
```
在上面的例子中,我们定义了一个message属性和一个reversedMessage计算属性,reversedMessage会根据message计算出一个新的值,然后在模板中使用。
vue2中computed的用法
在Vue2中,computed属性用于计算属性,它会根据依赖项的值自动更新。下面是computed的用法:
1. 值类型的写法:
```javascript
computed: {
// 侦听fullName属性的变化
fullName: {
// getter函数
get: function() {
return this.firstName + ' ' + this.lastName;
}, // setter函数
set: function(newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
```
2. 具有修改属性功能的写法:
```javascript
computed: {
// 计算属性,返回一个新的数组
reversedItems: {
get: function() {
return this.items.reverse();
},
// 修改items属性
set: function(newValue) {
this.items = newValue.reverse();
}
}
}
```
注意:computed属性只有在它的依赖项发生变化时才会重新计算。如果依赖项没有变化,computed属性会从缓存中获取值,而不会重新计算。
相关推荐
![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)