008 V 计算属性的更多用法：getter & setter

不二如是 · 发表于 2018-9-3 11:10:18

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2018-9-6 15:52 编辑

登录/注册后可看大图

上一讲我们介绍了何为计算属性，本次来学几个常用的玩法。

在计算属性里面可以完成各种复杂的逻辑（运算，函数调用等），只要最终返回一个我们需要的结果即可。

计算属性还可以依赖多个Vue实例的数据，只要其中任何一个数据变化，计算属性就会重新执行，视图也会相应的更行。

例如，最简单的在购物车中，两个商品的价格总和，任意一个变，总和跟着自动变。

创建div：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《Vue-庖丁解牛》案例演示">
<meta name="author" content="鱼C工作室">
<title>鱼C-Vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="myApp">
总价：{{prices}}
</div>
</body>
</html>

复制代码

创建Vue实例：

<script>
var app = new Vue({
el: "#myApp",
data: {
// 购物车1
shoppingCart1: [
{
name: "鱼C热血T-shirt",
price: 69,
count: 2
},
{
name: "调试大吉手环",
price: 11,
count: 3
}
],
// 购物车2
shoppingCart2: [
{
name: "《零基础入门学习Python》",
price: 59,
count: 3
},
{
name: "《零基础入门学习Scratch》",
price: 69,
count: 2
}
]
},
computed:{
// 计算总和
prices:function(){}
}
})
</script>

复制代码

创建了两个购物车，当购物车1或购物车2中的商品有任何变化，比如购买数量或增删商品时，计算总和的prices就会自动更新。

我们现在来完成prices方法的实现，在其中继续添加代码：

prices:function(){
// 默认为0
var prices = 0;
// 利用循环统计购物车1总和
for(var i = 0 ; i < this.shoppingCart1.length;i++){
// 统计价格和数量求单项总和
prices += this.shoppingCart1[i].price * this.shoppingCart1[i].count;
}
// 利用循环统计购物车2总和
for(var i = 0 ; i < this.shoppingCart2.length;i++){
// 请鱼油自行完成
}
return prices;
}

复制代码

getter & setter

上面我们完成了一个最简单的计算属性应用。

每一个计算属性都包含一个getter和setter，上面的示例中都是计算属性的默认用法。

只是利用了getter来读取数据，在需要时我们还可以用setter来手动修改计算属性的值，然后便会触发setter，执行一些自定义操作。

还是用代码说话，创建一个div：

<div id="myApp">
鱼C教材：{{fullMessage}}
</div>

复制代码

创建Vue：

<script>
var app = new Vue({
el: "#myApp",
data: {
bookName:'《零基础入门学习Python》',
author:'小甲鱼'
},
computed:{
fullMessage:{
// getter,用于读取
get:function(){
return this.bookName + '-' + this.author;
},
// setter,写入时触发
set:function(newValue){
// 从"-"地方分割字符串
var names = newValue.split('-');
this.bookName = names[0];
this.author = names[names.length -1];
}
}
}
})
</script>

复制代码

当执行app.fullMessage = '《带你学C带你飞》-小甲鱼'时，setter会自动调用。

数据bookName和author都会更新，视图同样也会更新。

绝大多数情况下，我们只会用默认的getter来读取一个计算属性。

在业务中很少使用setter，直接使用默认的写法，不必将两个都声明。

小技巧

计算属性还有两个很实用的小技巧：

1、计算属性可以依赖其他计算属性；

2、计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据。

创建两个div：

<div id="myApp"></div>
<div id="myApp2">
{{tstMessage}}
</div>

复制代码

创建两个Vue实例：

<script>
var app1 = new Vue({
el:"#myApp",
data:{
text:"我爱鱼C"
}
});
var app2 = new Vue({
el:"#myApp2",
computed:{
tstMessage:function () {
// 依赖实例app1的数据text
return app1.text;
}
}
})
</script>

复制代码

通过app2中的tstMessage计算属性调用app1中的数据。

所以当app1中的数据发生改变时，app2的属性也会跟着变化。

在日常多人开发时自己的写的组件得到的数据依赖其他人提供的组件，往往都是依赖这个技巧。

课后作业

1、计算属性可以依赖多个Vue实例吗？（T/F）

2、完成购物车2中for循环中的统计总和代码

3、默认情况我们只会有setter来读取一个计算属性？（T/F）

4、计算属性可以依赖其他Vue实例中的数据？（T/F）

答案：

游客，如果您要查看本帖隐藏内容请回复

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅专辑（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

差点夹不住屁 · 发表于 2018-10-11 14:34:56

已学习,谢谢老板

Ruide · 发表于 2020-4-8 12:05:09

T
price += that.shoppingCart2[i].price * that.shoppingCart2[i].count;
F
T

优时风 · 发表于 2020-5-5 11:35:01

Leslie994730 · 发表于 2020-5-8 02:19:50

查看

suweixuan1998 · 发表于 2020-6-23 17:52:47

T
for(var i = 0 ; i < this.shoppingCart2.length;i++){
//                   统计价格和数量求单项总和
                  prices += this.shoppingCart2[i].price * this.shoppingCart2[i].count;
            }
F
T

jack6666 · 发表于 2022-10-31 11:03:01

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 008 V 计算属性的更多用法：getter & setter

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐:

浏览过的版块