VueJS – 计算属性（7）
我们已经看到了 Vue 实例和组件的方法。计算属性类似于方法，但与方法相比有一些不同，我们将在本章中讨论。
在本章结束时，我们将能够决定何时使用方法以及何时使用计算属性。
让我们通过一个例子来理解计算属性。
例子
<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 是一个文本框，使用属性 firstname 和 lastname 绑定。
我们正在调用计算方法 getfullname，它返回输入的名字和姓氏。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}当我们在文本框中键入相同的内容时，当属性 firstname 或 lastname 更改时，函数会返回相同的内容。因此，在计算的帮助下，我们不必做任何特定的事情，例如记住调用函数。随着计算它被自己调用，因为内部使用的属性发生变化，即名字和姓氏。
在以下浏览器中显示相同。输入文本框，同样将使用计算函数进行更新。
现在，让我们试着理解方法和计算属性之间的区别。两者都是对象。里面定义了一些函数，它返回一个值。
在方法的情况下，我们将其称为函数，并将计算为属性。使用以下示例，让我们了解方法和计算属性之间的区别。
<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 函数。
例子
<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的函数，它给出全名，即名字和姓氏。此外，我们将名字和姓氏显示为 –
<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]
}
}
}它以名称作为参数，它只是文本框中的全名。稍后，它在空间上被分割，并且名字和姓氏被更新。现在，当我们运行代码并编辑文本框时，浏览器中将显示相同的内容。由于 set 函数，firstname 和 lastname 将被更新。get 函数返回名字和姓氏，而 set 函数会更新它，如果有任何编辑。
现在，文本框中输入的任何内容都与上面屏幕截图中显示的内容相匹配。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
