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,则函数会返回相同的内容。

1604672218863

使用以下示例,让我们了解方法(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()返回随机数。

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

1604672228706

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

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>

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

1604672242798

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

1604672248711

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

1604672254173

取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by bytekits.com,汇天下文字,成非凡梦想!!!