我們已經(jīng)看到了Vue實(shí)例和組件的方法。 計(jì)算屬性就像方法，但與方法相比有一些區(qū)別，我們將在本章中討論。
在本章最后，您將能夠理解并決定何時(shí)使用方法以及何時(shí)使用計(jì)算屬性。
下面通過(guò)使用一個(gè)例子來(lái)理解計(jì)算屬性。創(chuàng)建一個(gè)文件：computed-properties.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs計(jì)算屬性示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
名字 : <input type = "text" v-model = "name" /> <br/><br/>
城市 : <input type = "text" v-model = "city"/> <br/><br/>
<p>名字：{{name}}，所在城市：{{city}}</p>
<p>使用計(jì)算方法 : {{getinfo}}</p>
</div>
<script type = "text/javascript" src = "js/vue_computedprops.js"></script>
</body>
</html>
創(chuàng)建另一個(gè)文件：vue_computeprops.js -
var vm = new Vue({
el: '#computed_props',
data: {
name :"",
city :"",
birthyear : ""
},
computed :{
getinfo : function(){
return this.name +" ，所在城市："+ this.city;
}
}
})
在這里，創(chuàng)建了帶有名字和城市的computed-properties.html文件。 名字和城市是使用屬性name和city綁定的文本框。調(diào)用計(jì)算方法 - getinfo，它返回輸入的名字和城市。
computed :{
getinfo : function(){
return this.name +" ，所在城市："+ this.city;
}
}
當(dāng)鍵入文本框時(shí)，函數(shù)返回的是相同的，當(dāng)屬性name或city改變時(shí)。 因此，在計(jì)算屬性的幫助下，不必做任何具體的事情，比如調(diào)用函數(shù)。 通過(guò)計(jì)算屬性，它可以自己調(diào)用，就像名字和城市在變化中使用的屬性一樣。在下面的瀏覽器中顯示相同的內(nèi)容。輸入文本框，并使用計(jì)算的功能更新。
現(xiàn)在，我們?cè)囍私庖粋€(gè)方法和一個(gè)計(jì)算屬性之間的區(qū)別。 兩者都是對(duì)象。 有里面定義的函數(shù)，它返回一個(gè)值。
在方法的情況下，我們將其稱(chēng)為函數(shù)，并將其作為屬性進(jìn)行計(jì)算。 使用下面的例子，來(lái)了解方法和計(jì)算屬性的區(qū)別。
創(chuàng)建一個(gè)文件：computed-properties2.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs計(jì)算屬性VS函數(shù)示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<p style = "background-color:#eee;">Random No from computed property: {{getrandomno}}</p>
<p>Random No from method: {{getrandomno1()}}</p>
<p>Random No from method : {{getrandomno1()}}</p>
<p style = "background-color:#eee;">Random No from computed property: {{getrandomno}}</p>
<p style = "background-color:#eee;">Random No from computed property: {{getrandomno}}</p>
<p style = "background-color:#eee;">Random No from computed
property: {{getrandomno}}</h1>
<p>Random No from method: {{getrandomno1()}}</p>
<p>Random No from method: {{getrandomno1()}}</p>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
name : "helloworld"
},
methods: {
getrandomno1 : function() {
return Math.random();
}
},
computed :{
getrandomno : function(){
return Math.random();
}
}
});
</script>
</body>
</html>
在上面的代碼中，我們創(chuàng)建了一個(gè)名為getrandomno1的方法和一個(gè)帶有函數(shù)getrandomno的計(jì)算屬性。兩者都使用Math.random()函數(shù)返回隨機(jī)數(shù)。
它顯示在瀏覽器中，如下所示。 該方法和計(jì)算屬性被稱(chēng)為多次顯示差異。
如果看一下上面的值，會(huì)看到從計(jì)算屬性返回的隨機(jī)數(shù)保持不變，而不管它被調(diào)用的次數(shù)。 這意味著每次調(diào)用時(shí)都會(huì)更新最后一個(gè)值。 而對(duì)于一個(gè)方法來(lái)說(shuō)，這是一個(gè)函數(shù)，因此，每次調(diào)用它都會(huì)返回一個(gè)不同的值。
在本節(jié)中，我們將通過(guò)一個(gè)示例來(lái)了解計(jì)算屬性中的get/set函數(shù)。創(chuàng)建一個(gè)文件：computed-properties3.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs計(jì)算屬性VS函數(shù)示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "userinfo" />
<p>名字：{{name}}</p>
<p>城市：{{city}}</p>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
name : "Maxsu",
city : "?？?quot;
},
methods: {
},
computed :{
userinfo : {
get : function() {
return this.name+"，城市："+this.city;
}
}
}
});
</script>
</body>
</html>
上面已經(jīng)定義了一個(gè)綁定到userinfo輸入框，這是一個(gè)計(jì)算屬性。 它返回一個(gè)調(diào)用get函數(shù)，它給出了用戶(hù)信息，即名字和城市。 此外，顯示的名字和城市的代碼為 -
<p>名字：{{name}}</p>
<p>城市：{{city}}</p>
在瀏覽器中查看，效果如下 -
現(xiàn)在，如果想要在文本框中更改名稱(chēng)或城市時(shí)，將會(huì)看到相同的內(nèi)容不會(huì)反映在輸入框的下方呢？如何做到？
在userinfo計(jì)算屬性中添加setter函數(shù)。參考以下代碼 -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs計(jì)算屬性VS函數(shù)示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "userinfo" />
<p>名字：{{name}}</p>
<p>城市：{{city}}</p>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
name : "Maxsu",
city : "?？?quot;
},
methods: {
},
computed :{
userinfo : {
get : function() {
if(this.city){
return this.name+" "+this.city;
}else{
return this.name;
}
},
set : function(name) {
var fname = name.split(" ");
this.name = fname[0];
if(fname[1]!=undefined){
this.city = fname[1];
}
}
}
}
});
</script>
</body>
</html>
我們?cè)?code>userinfo計(jì)算屬性中添加了set函數(shù)。
computed :{
userinfo : {
get : function() {
if(this.city){
return this.name+" "+this.city;
}else{
return this.name;
}
},
set : function(name) {
var fname = name.split(" ");
this.name = fname[0];
if(fname[1]!=undefined){
this.city = fname[1];
}
}
}
}
使用name作為參數(shù)，它是文本框中的值。之后使用空格符(" ")分割，得到名字和城市新值。當(dāng)運(yùn)行代碼并編輯文本框時(shí)，瀏覽器中將顯示相同的內(nèi)容。名字和城市將因set函數(shù)的作用被更新。如果輸入被編輯，那么 get函數(shù)返回名字和城市，而set函數(shù)負(fù)責(zé)更新它。如下圖所示 -
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多