我们已经看到了Vue实例和组件的方法。 计算属性就像方法，但与方法相比有一些区别，我们将在本章中讨论。
在本章最后，您将能够理解并决定何时使用方法以及何时使用计算属性。
下面通过使用一个例子来理解计算属性。创建一个文件：computed-properties.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs计算属性示例</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>使用计算方法 : {{getinfo}}</p>
</div>
<script type = "text/javascript" src = "js/vue_computedprops.js"></script>
</body>
</html>
创建另一个文件：vue_computeprops.js -
var vm = new Vue({
el: '#computed_props',
data: {
name :"",
city :"",
birthyear : ""
},
computed :{
getinfo : function(){
return this.name +" ，所在城市："+ this.city;
}
}
})
在这里，创建了带有名字和城市的computed-properties.html文件。 名字和城市是使用属性name和city绑定的文本框。调用计算方法 - getinfo，它返回输入的名字和城市。
computed :{
getinfo : function(){
return this.name +" ，所在城市："+ this.city;
}
}
当键入文本框时，函数返回的是相同的，当属性name或city改变时。 因此，在计算属性的帮助下，不必做任何具体的事情，比如调用函数。 通过计算属性，它可以自己调用，就像名字和城市在变化中使用的属性一样。在下面的浏览器中显示相同的内容。输入文本框，并使用计算的功能更新。
现在，我们试着了解一个方法和一个计算属性之间的区别。 两者都是对象。 有里面定义的函数，它返回一个值。
在方法的情况下，我们将其称为函数，并将其作为属性进行计算。 使用下面的例子，来了解方法和计算属性的区别。
创建一个文件：computed-properties2.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs计算属性VS函数示例</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>
在上面的代码中，我们创建了一个名为getrandomno1的方法和一个带有函数getrandomno的计算属性。两者都使用Math.random()函数返回随机数。
它显示在浏览器中，如下所示。 该方法和计算属性被称为多次显示差异。
如果看一下上面的值，会看到从计算属性返回的随机数保持不变，而不管它被调用的次数。 这意味着每次调用时都会更新最后一个值。 而对于一个方法来说，这是一个函数，因此，每次调用它都会返回一个不同的值。
计算属性中的Get/Set函数
在本节中，我们将通过一个示例来了解计算属性中的get/set函数。创建一个文件：computed-properties3.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs计算属性VS函数示例</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 : "海口"
},
methods: {
},
computed :{
userinfo : {
get : function() {
return this.name+"，城市："+this.city;
}
}
}
});
</script>
</body>
</html>
上面已经定义了一个绑定到userinfo输入框，这是一个计算属性。 它返回一个调用get函数，它给出了用户信息，即名字和城市。 此外，显示的名字和城市的代码为 -
<p>名字：{{name}}</p>
<p>城市：{{city}}</p>
在浏览器中查看，效果如下 -
现在，如果想要在文本框中更改名称或城市时，将会看到相同的内容不会反映在输入框的下方呢？如何做到？
在userinfo计算属性中添加setter函数。参考以下代码 -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs计算属性VS函数示例</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 : "海口"
},
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>
我们在userinfo计算属性中添加了set函数。
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作为参数，它是文本框中的值。之后使用空格符(" ")分割，得到名字和城市新值。当运行代码并编辑文本框时，浏览器中将显示相同的内容。名字和城市将因set函数的作用被更新。如果输入被编辑，那么 get函数返回名字和城市，而set函数负责更新它。如下图所示 -
