VueJS計算屬性


我們已經看到了Vue範例和元件的方法。 計算屬性就像方法,但與方法相比有一些區別,我們將在本章中討論。

在本章最後,您將能夠理解並決定何時使用方法以及何時使用計算屬性。

下面通過使用一個例子來理解計算屬性。建立一個檔案:computed-properties.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs計算屬性範例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         名字 : <input type = "text" v-model = "name" /> <br/><br/>
         城市 : <input type = "text" v-model = "city"/> <br/><br/>
         <p>名字:{{name}},所在城市:{{city}}</p>
         <p>使用計算方法 : {{getinfo}}</p>
      </div>
      <script type = "text/javascript" src = "js/vue_computedprops.js"></script>
   </body>
</html>

建立另一個檔案:vue_computeprops.js -

var vm = new Vue({
   el: '#computed_props',
   data: {
      name :"",
      city :"",
      birthyear : ""
   },
   computed :{
      getinfo : function(){
         return this.name +" ,所在城市:"+ this.city;
      }
   }
})

在這裡,建立了帶有名字和城市的computed-properties.html檔案。 名字和城市是使用屬性namecity係結的文字框。呼叫計算方法 - getinfo,它返回輸入的名字和城市。

computed :{
      getinfo : function(){
         return this.name +" ,所在城市:"+ this.city;
      }
   }

當鍵入文字框時,函式返回的是相同的,當屬性namecity改變時。 因此,在計算屬性的幫助下,不必做任何具體的事情,比如呼叫函式。 通過計算屬性,它可以自己呼叫,就像名字和城市在變化中使用的屬性一樣。在下面的瀏覽器中顯示相同的內容。輸入文字框,並使用計算的功能更新。

現在,我們試著瞭解一個方法和一個計算屬性之間的區別。 兩者都是物件。 有裡面定義的函式,它返回一個值。

在方法的情況下,我們將其稱為函式,並將其作為屬性進行計算。 使用下面的例子,來了解方法和計算屬性的區別。
建立一個檔案:computed-properties2.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs計算屬性VS函式範例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <p style = "background-color:#eee;">Random No from computed property: {{getrandomno}}</p>
         <p>Random No from method: {{getrandomno1()}}</p>
         <p>Random No from method : {{getrandomno1()}}</p>
         <p  style = "background-color:#eee;">Random No from computed property: {{getrandomno}}</p>
         <p  style = "background-color:#eee;">Random No from computed property: {{getrandomno}}</p>
         <p  style = "background-color:#eee;">Random No from computed
            property: {{getrandomno}}</h1>
         <p>Random No from method: {{getrandomno1()}}</p>
         <p>Random No from method: {{getrandomno1()}}</p>
      </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/set函式。建立一個檔案:computed-properties3.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs計算屬性VS函式範例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "userinfo" />
         <p>名字:{{name}}</p>
         <p>城市:{{city}}</p>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               name : "Maxsu",
               city : "海口"
            },
            methods: {
            },
            computed :{
               userinfo : {
                  get : function() {
                     return this.name+",城市:"+this.city;
                  }
               }
            }
         });
      </script>
   </body>
</html>

上面已經定義了一個系結到userinfo輸入框,這是一個計算屬性。 它返回一個呼叫get函式,它給出了使用者資訊,即名字和城市。 此外,顯示的名字和城市的程式碼為 -

<p>名字:{{name}}</p>
<p>城市:{{city}}</p>

在瀏覽器中檢視,效果如下 -

現在,如果想要在文字框中更改名稱或城市時,將會看到相同的內容不會反映在輸入框的下方呢?如何做到?

userinfo計算屬性中新增setter函式。參考以下程式碼 -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs計算屬性VS函式範例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "userinfo" />
         <p>名字:{{name}}</p>
         <p>城市:{{city}}</p>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               name : "Maxsu",
               city : "海口"
            },
            methods: {
            },
            computed :{
               userinfo : {
                  get : function() {
                      if(this.city){
                        return this.name+" "+this.city;    
                      }else{
                        return this.name;
                      }

                  },
                  set : function(name) {
                     var fname = name.split(" ");
                     this.name = fname[0];
                     if(fname[1]!=undefined){
                        this.city = fname[1];
                     }  
                  }
               }
            }
         });
      </script>
   </body>
</html>

我們在userinfo計算屬性中新增了set函式。

computed :{
               userinfo : {
                  get : function() {
                      if(this.city){
                        return this.name+" "+this.city;    
                      }else{
                        return this.name;
                      }

                  },
                  set : function(name) {
                     var fname = name.split(" ");
                     this.name = fname[0];
                     if(fname[1]!=undefined){
                        this.city = fname[1];
                     }  
                  }
               }
            }

使用name作為引數,它是文字框中的值。之後使用空格符(" ")分割,得到名字和城市新值。當執行程式碼並編輯文字框時,瀏覽器中將顯示相同的內容。名字和城市將因set函式的作用被更新。如果輸入被編輯,那麼 get函式返回名字和城市,而set函式負責更新它。如下圖所示 -