让我们使用示例来了解计算属性。
eg:
<html>
<head>
<title>VueJs Instancetitle>
<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文件。名和姓是一个使用属性名和姓绑定的文本框。
我们正在调用计算方法getfullname，该方法返回输入的名字和姓氏。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
当我们在文本框中键入内容时，如果更改属性firstname或lastname，则函数会返回相同的内容。因此，在计算的帮助下，我们不必做任何特定的事情，例如记住要调用一个函数。通过计算，它会被自身调用，因为内部使用的属性会发生变化，即名和姓。
在以下浏览器中也显示相同的内容。在文本框中输入文字，然后将使用计算的功能对其进行更新。
现在，让我们尝试了解方法和计算属性之间的区别。两者都是对象。里面定义了函数，返回一个值。对于方法，我们将其称为函数，对于计算为属性。通过下面的示例，让我们了解方法和计算属性之间的区别。
<html>
<head>
<title>VueJs Instancetitle>
<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()返回随机数。
它显示在浏览器中，如下所示。多次调用方法和计算属性以显示差异。
如果我们看一下上面的值，就会发现从computed属性返回的随机数与调用它的次数无关。这意味着每次调用它时，最后一个值都会被更新。然而对于一个方法来说，它是一个函数，因此，每次调用它都会返回一个不同的值。
Get/Set计算属性
在本节中，我们将使用一个示例来了解计算属性中的Get/Set函数。
例
<html>
<head>
<title>VueJs Instancetitle>
<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的输入框，fullname是一个计算属性。它返回一个名为get的函数，该函数给出了全名，即名字和姓氏。另外，我们将名字和姓氏显示为-
<h1>{{firstName}}h1>
<h1>{{lastName}}h1>
让我们在浏览器中检查一下。
现在，如果我们在文本框中更改名称，我们将看到以下屏幕截图中显示的名称中未反映出相同的名称。
让我们在全名计算属性中添加setter函数。
<html>
<head>
<title>VueJs Instancetitle>
<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函数将对其进行更新。
现在，文本框中键入的内容与上面的屏幕快照中显示的内容匹配。
END
时光，在物转星移中渐行渐远，春花一梦，流水无痕，没有在最想做的时候去做的事情，都是人生的遗憾。人生需要深思熟虑，也需要一时的冲动。
1264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
