Vue.js 计算属性用法
2019-08-01 本文已影响0人
Rinaloving
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。计算属性还可以依赖多个Vue实例的数据，只要其中任何一数据变化，计算属性就会重新执行，视图也会更新。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计算属性用法</title>
</head>
<body>
<div id="app">
总价：{{ prices }}
</div>
<div id="app2">
姓名：{{ fullName }}
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
package1:[
{
name:'iPhone 7',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
computed:{
/*当package1 或 package2 中的商品有任何变化，比如购买数量变化或增删商品时，计算属性
prices 就会自动更新，视图中的总价也会自动变化。 */
prices:function(){
var prices = 0;
for(var i = 0; i < this.package1.length; i++){
prices += this.package1[i].price * this.package1[i].count;
}
for(var i = 0; i < this.package2.length; i++){
prices += this.package2[i].price * this.package2[i].count;
}
return prices;
}
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
firstName:'Jack',
lastName:'Green'
},
computed:{
/* 每一个计算属性都包含一个getter 和一个 setter，我们上面的两个示例都是计算属性的默认用
法，只是利用了getter 来读取。在你需要时，也可以提供一个setter函数，当手动修改计算属性的
值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义的操作，*/
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];
}
}
}
})
</script>
</body>
</html>
计算属性的用法.png
