VueJS 计算属性
VueJS 计算属性
我们已经学习到了Vue实例和组件的方法。 计算属性就像方法，但跟方法相比有一些区别，我们将在本章中讨论。
在本章最后，您将能够理解并决定何时使用方法以及何时使用计算属性。
下面通过一个例子来理解计算属性。创建一个文件：computed-properties.html：
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.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" src = "js/vue_computedprops.js"></script>
</body>
</html>接下来创建vue_computeprops.js文件：
var vm = new Vue({
el: '#computed_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
})在这里，我们创创建了具有名字和姓氏的html文件。名字和姓氏是使用firstname和lastname属性绑定的文本框。
我们调用计算方法getfullname，它返回输入的名字和姓氏。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}当我们在textbox中键入时或者当属性名或姓更改时，函数将返回相同的值。因此，在计算属性的帮助下，我们不必做任何特定的事情，例如记住调用函数。使用computed时，当内部使用的属性(即名字和姓氏)发生变化时，它会被自己调用。
相同内容将显示在以下浏览器中，在文本框中输入内容，将使用计算函数更新该文本框。
现在，让我们尝试了解方法和计算属性之间的区别。两者都是对象。内部定义了函数，该函数返回一个值。
在方法的情况下，我们将其称为函数，而对于计算则称为属性。使用下列范例，让我们瞭解方法和计算属性之间的差异。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method : {{getrandomno1()}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed
property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
</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的计算属性。两者都是用数学给出随机数。
它显示在浏览器中，如下所示。方法和计算属性被多次调用以显示差异。
如果我们查看上面的值，我们将看到从计算属性返回的随机数保持不变，而与调用次数无关。这意味着每次调用它时，最后一个值都会更新为all。而对于一个方法，它是一个函数，因此，每次调用它都返回不同的值。
计算属性中的Get/Set函数
在本节中，我们将通过一个示例来了解计算属性中的get/set函数。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.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 : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
}
}
}
});
</script>
</body>
</html>我们定义了一个绑定到fullname的输入框，这是一个计算属性。它返回一个名为get的函数，该函数给出全名，即firstName和lastName。此外，我们还将名字和姓氏显示为：
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>让我们在浏览器中检查内容。
现在，如果我们更改文本框中的名称，我们将看到相同的名称不会反映在下面屏幕截图中显示的名称中。
让我们在fullname计算属性中添加setter函数。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.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 : "Ben"
},
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>我们已经在fullname计算属性中添加了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]
}
}
}它用name作为参数，它只是文本框中的全名。随后，它将在空间上拆分，并更新名字和姓氏。现在，当我们运行代码并编辑文本框时，浏览器中将显示相同的内容。由于set函数，将更新名字和姓氏。get函数返回名字和姓氏，而set函数则更新名字和姓氏(如果编辑了任何内容)。
现在，文本框中键入的内容与上面屏幕截图中显示的内容相匹配