Vue.js-----轻量高效的MVVM框架（五、计算属性）

#基础例子

<div id="dr01"><h4>#基础例子</h4><div>num01={{num01}}, num02={{num02}}<p>num01: vm定义的属性，num02：计算出来的属性</p></div>
</div>

var dr01 = new Vue({el: "#dr01",data: {num01: 10,},computed: {num02: function() {return this.num01 * 5;}}
})

在js中定义组件dr01，初始化数据num01:10，computed中定义了num02（一个返回值为num01*5的方法）。

在页面中，{{num01}}为我们定义{{num02}}为计算出来的结果：

#计算属性vue.$watch

<div id="dr02"><h4>#计算属性vue.$watch</h4><div><span>FirstName01: </span><input type="text" v-model="firstName01" /><br /><span>LastName01: </span><input type="text" v-model="lastName01" /><br /><span>FullName01: </span><input type="text" readonly="readonly" v-model="fullName01" disabled="disabled" /></div><br /><div><span>FirstName02: </span><input type="text" v-model="firstName02" /><br /><span>LastName02: </span><input type="text" v-model="lastName02" /><br /><span>FullName02: </span><input type="text" readonly="readonly" v-model="fullName02" disabled="disabled" /></div>
</div>

var dr02 = new Vue({el: "#dr02",data: {firstName01: "Dark",lastName01: "Ranger",fullName01: "Dark Ranger",firstName02: "Slight",lastName02: "Wind"},computed: {fullName02: function() {return this.firstName02 + " " + this.lastName02;}}
});
dr02.$watch("firstName01", function(val) {this.fullName01 = val + " " + this.lastName01;
});
dr02.$watch("lastName01", function(val) {this.fullName01 = this.firstName01 + " " + val;
});

双向数据绑定的时候我们经常会遇到这样的情况：数据3=数据1+数据2，我们单独更新数据1或者数据2以后，数据3需要实时更新。这里我们有两种解决方案，但是肯定推荐第二种计算属性，为什么，简单！！！

1、在data中定义firstName01: "Dark",lastName01: "Ranger",为了初始化数据的时候fullName01也一样，同样定义fullName01: "Dark Ranger"

为了实时更新数据fullName01，我们需要对firstName01和lastName01进行观察，即加上dr02.$watch语句。

2、在data中定义firstName02: "Slight",lastName02: "Wind"，对fullName02我们采用计算属性的方式：把fullName02定义为一个返回值为firstName02+lastName02的方法，这样，当firstName02或者lastName02发生数据变更的时候，fullName02通过计算属性也会发生变化，进行实时更新。

　　初始化数据

　　firstname或者lastname数据更新后

#计算setter

上面的例子，我们考虑个问题，是的，当firstname或者lastname数据更新的时候，fullname数据也会更新；但是，当fullname数据发生变化的时候firstname和lastname并不会更新，因为在方式1中我们没有对fullname加入观察，如果加入观察，是可以更新，但是我们要更新10000条数据，也就要写对10000个数据进行观察的$watch方法，这里我们在方式2中对数据fullname加入get和set方法即可。

方式2的gettter和setter

<div id="dr03"><h4>#计算setter</h4><span>FirstName: </span><input type="text" v-model="firstName" /><br /><span>LastName: </span><input type="text" v-model="lastName" /><br /><span>FullName: </span><input type="text" v-model="fullName" />
</div>

var dr03 = new Vue({el: "#dr03",data: {firstName: "Zhang",lastName: "Yao"},computed: {fullName: {get: function() {return this.firstName + " " + this.lastName;},set: function(newValue) {var names = newValue.split(" ");this.firstName = names[0];this.lastName = names[1];}}}
})

初始化数据：

当firstname、lastname、fullname中的一个发生变化的时候，其他数据也会实时更新

完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><script type="text/javascript" src="js/vue.js"></script><title>计算属性</title></head><body><div id="dr01"><h4>#基础例子</h4><div>num01={{num01}}, num02={{num02}}<p>num01: vm定义的属性，num02：计算出来的属性</p></div></div><div id="dr02"><h4>#计算属性vue.$watch</h4><div><span>FirstName01: </span><input type="text" v-model="firstName01" /><br /><span>LastName01: </span><input type="text" v-model="lastName01" /><br /><span>FullName01: </span><input type="text" readonly="readonly" v-model="fullName01" disabled="disabled" /></div><br /><div><span>FirstName02: </span><input type="text" v-model="firstName02" /><br /><span>LastName02: </span><input type="text" v-model="lastName02" /><br /><span>FullName02: </span><input type="text" readonly="readonly" v-model="fullName02" disabled="disabled" /></div></div><div id="dr03"><h4>#计算setter</h4><span>FirstName: </span><input type="text" v-model="firstName" /><br /><span>LastName: </span><input type="text" v-model="lastName" /><br /><span>FullName: </span><input type="text" v-model="fullName" /></div><script>var dr01 = new Vue({el: "#dr01",data: {num01: 10,},computed: {num02: function() {return this.num01 * 5;}}})var dr02 = new Vue({el: "#dr02",data: {firstName01: "Dark",lastName01: "Ranger",fullName01: "Dark Ranger",firstName02: "Slight",lastName02: "Wind"},computed: {fullName02: function() {return this.firstName02 + " " + this.lastName02;}}});dr02.$watch("firstName01", function(val) {this.fullName01 = val + " " + this.lastName01;});dr02.$watch("lastName01", function(val) {this.fullName01 = this.firstName01 + " " + val;});var dr03 = new Vue({el: "#dr03",data: {firstName: "Zhang",lastName: "Yao"},computed: {fullName: {get: function() {return this.firstName + " " + this.lastName;},set: function(newValue) {var names = newValue.split(" ");this.firstName = names[0];this.lastName = names[1];}}}})</script></body></html>

转载于:https://www.cnblogs.com/wrcold520/p/5512692.html