关注我们

VueJS - Computed属性

无涯教程已经看到了Vue实例和组件的方法。计算属性(Computed Properties)类似于方法，但与方法相比有一些区别，将在本章中讨论。

通过一个例子来了解Computed计算属性。

<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>

在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]
      }
   }
}