vue 计算屏幕的高度_VUE简单入门基础教程（七）计算属性

我们已经看到了Vue实例和组件的方法。计算属性类似于方法，但与方法相比有一些区别，我们将在本章中讨论。

在本章的最后，我们将能够决定何时使用方法以及何时使用计算属性。

让我们使用示例来了解计算属性。

例

         VueJs Instance

FirstName :
LastName :

My name is {{firstname}} {{lastname}}

Using computed method : {{getfullname}}

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，则函数会返回相同的内容。因此，在计算的帮助下，我们不必做任何特定的事情，例如记住要调用一个函数。通过计算，它会被自身调用，因为内部使用的属性会发生变化，即名和姓。

在以下浏览器中也显示相同的内容。在文本框中输入文字，将使用计算功能更新该文字框。

现在，让我们尝试了解方法和计算属性之间的区别。两者都是对象。内部定义了一些函数，这些函数返回一个值。

在使用方法的情况下，我们将其称为函数，而将其称为属性。使用以下示例，让我们了解方法和计算属性之间的区别。

         VueJs Instance

Random No from computed property: {{getrandomno}}

Random No from method: {{getrandomno1()}}

Random No from method : {{getrandomno1()}}

Random No from computed property: {{getrandomno}}

Random No from computed property: {{getrandomno}}

Random No from computed property: {{getrandomno}}

Random No from method: {{getrandomno1()}}

Random No from method: {{getrandomno1()}}

在上面的代码中，我们创建了一个名为getrandomno1的方法和一个带有函数getrandomno的计算属性。两者都使用Math.random()返回随机数。

它显示在浏览器中，如下所示。多次调用方法和计算属性以显示差异。

如果我们看一下上面的值，我们将看到从计算属性返回的随机数保持不变，而与调用它的次数无关。这意味着每次调用时，所有的最后一个值都会更新。而对于方法来说，它是一个函数，因此，每次调用它都会返回一个不同的值。

获取/设置计算属性

在本节中，我们将使用一个示例来了解计算属性中的获取/设置函数。

例

         VueJs Instance

{{firstName}}

{{lastName}}

我们定义了一个绑定到fullname的输入框，fullname是一个计算属性。它返回一个名为get的函数，该函数给出了全名，即名字和姓氏。此外，我们将名字和姓氏显示为-

{{firstName}}

{{lastName}}

让我们在浏览器中检查一下。

现在，如果我们在文本框中更改名称，我们将看到以下屏幕快照中显示的名称中未包含相同的名称。

让我们在全名计算属性中添加setter函数。

         VueJs Instance

{{firstName}}

{{lastName}}

我们在全名计算属性中添加了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函数将对其进行更新。

现在，文本框中键入的内容与上面的屏幕快照中显示的内容匹配。