VueJS 计算属性(Computed)
我们已经看到了Vue实例和组件的方法。计算属性(Computed Properties)类似于方法，但与方法相比有一些区别，我们将在本章中讨论。
让我们通过一个例子来了解计算属性。
<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;
}
}
})
我 们正在调用计算方法getfullname，该方法返回输入的名字和姓氏。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
当我们在文本框中键入内容时，如果更改属性firstname或lastname，则函数会返回相同的内容。
使用以下示例，让我们了解方法(method)和计算属性(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 的计算属性，两者都使用Math.random()返回随机数。
它显示在浏览器中，如下所示。多次调用方法和计算属性以显示差异。
如果我们看一下上面的值，我们将看到从计算属性返回的随机数保持不变，而与调用它的次数无关。这意味着每次调用时，所有的最后一个值都会更新。对于方法来说，它是一个函数，因此，每次调用它都会返回一个不同的值。
get/set 计算属性
在本节中，我们将通过一个示例来了解计算属性中的get/sest函数。
<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>
我们定义了一个绑定到 全 名的输入框，该输入框是一个计算属性。它返回一个名为 get 的函数，该函数给出全名，即名字和姓氏。另外，我们将名字和姓氏显示为-
< h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
让我们在浏览器中检查一下。
现在，如果我们在文本框中更改名称，我们将看到以下屏幕快照中显示的名称中未反映出相同的名称。
让我们在全名计算属性中添加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>
我们在全名计算属性中添加了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函数将对其进行更新。
