我们已经看到了Vue实例和组件的方法。计算属性类似于方法，但与方法相比有一些区别，我们将在本章中讨论。
在本章的最后，我们将能够决定何时使用方法以及何时使用计算属性。
让我们使用示例来了解计算属性。
例
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
</head>
<body>
<div id = "computed_props">
FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
<h1>My name is {{firstname}} {{lastname}}</h1>
<h1>Using computed method : {{getfullname}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
})
</script>
</body>
</html>在这里，我们用名字和姓氏创建了.html文件。名和姓是一个使用属性名和姓绑定的文本框。
我们正在调用计算方法getfullname，该方法返回输入的名字和姓氏。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}当我们在文本框中键入内容时，如果更改属性firstname或lastname，则函数会返回相同的内容。因此，在计算的帮助下，我们不必做任何特定的事情，例如记住要调用一个函数。通过计算，它会被自身调用，因为内部使用的属性会发生变化，即名和姓。
在以下浏览器中也显示相同的内容。在文本框中输入文字，然后将使用计算的功能对其进行更新。
现在，让我们尝试了解方法和计算属性之间的区别。两者都是对象。内部定义了一些函数，这些函数返回一个值。
在使用方法的情况下，我们将其称为函数，而将其称为属性。使用以下示例，让我们了解方法和计算属性之间的区别。
在上面的代码中，我们创建了一个名为getrandomno1的方法和一个带有函数getrandomno的计算属性。两者都使用Math.random()返回随机数。
它显示在浏览器中，如下所示。多次调用方法和计算属性以显示差异。
如果我们看一下上面的值，我们将看到从计算属性返回的随机数保持不变，而与调用它的次数无关。这意味着每次调用时，所有的最后一个值都会更新。对于方法来说，它是一个函数，因此，每次调用它都会返回一个不同的值。
获取/设置计算属性
在本节中，我们将使用一个示例来了解计算属性中的获取/设置函数。
例
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Andy"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
}
}
}
});
</script>
</body>
</html>我们定义了一个绑定到fullname的输入框，fullname是一个计算属性。它返回一个名为get的函数，该函数给出了全名，即名字和姓氏。另外，我们将名字和姓氏显示为-
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>大家可以运行下以上代码看看效果。
现在，如果我们在文本框中更改名称，我们将看到以下屏幕截图中显示的名称中未反映出相同的名称。
让我们在全名计算属性中添加setter函数。
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Andy"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
});
</script>
</body>
</html>我们在全名计算属性中添加了set函数。
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}它具有名称作为参数，除了文本框中的全名外，什么都没有。以后，它在空间上分割，并且姓和名被更新。现在，当我们运行代码并编辑文本框时，相同的内容将显示在浏览器中。由于设置了功能，名字和姓氏将被更新。如果编辑了任何内容，get函数将返回名字和姓氏，而set函数将对其进行更新。
现在大家再尝试下，在文本框中键入的任何内容都将与上面的屏幕快照中显示的内容匹配。
作者：terry，如若转载，请注明出处：https://www.web176.com/vuejs/1050.html
支付宝 
微信 