91aaa在线国内观看,亚洲AV午夜福利精品一区二区,久久偷拍人视频,久久播这里有免费视播

<strong id="fvuar"></strong>

  • <sub id="fvuar"><dl id="fvuar"><em id="fvuar"></em></dl></sub>

    1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

      手機(jī)站
      千鋒教育

      千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

      千鋒教育

      掃一掃進(jìn)入千鋒手機(jī)站

      領(lǐng)取全套視頻
      千鋒教育

      關(guān)注千鋒學(xué)習(xí)站小程序
      隨時隨地免費學(xué)習(xí)課程

      當(dāng)前位置:首頁  >  技術(shù)干貨  > Vue的computed傳參詳解

      Vue的computed傳參詳解

      來源:千鋒教育
      發(fā)布人:xqq
      時間: 2023-11-24 21:06:57 1700831217

      一、computed的基本用法

      computed是Vue實例中一個非常強(qiáng)大的計算屬性,它的值主要根據(jù)依賴的數(shù)據(jù)而變化。我們可以將一些簡單的計算放到computed屬性中,從而實現(xiàn)在模板中使用簡單的表達(dá)式??纯聪旅娴拇a:

      
        
          new Vue({
            el: '#app',
            data: {
              price: 10,
              count: 2
            },
            computed: {
              totalPrice: function() {
                return this.price * this.count;
              }
            }
          })
        
      

      在上面的代碼中,我們定義了兩個數(shù)據(jù)price和count,以及一個computed屬性totalPrice。我們在模板中直接使用totalPrice就可以獲得計算后的值。這樣做的好處是代碼更加簡潔明了,而且computed屬性只有在依賴的數(shù)據(jù)發(fā)生變化時才會重新計算。

      二、computed傳參的兩種方式

      1. 直接在computed中傳參

      computed傳參是一種非常靈活的方式,我們可以通過傳參來實現(xiàn)復(fù)雜的計算,在Vue實例中直接定義,這種方式通常適用于傳遞不同的值對同一個函數(shù)進(jìn)行計算的情況。

      
        
          new Vue({
            el: '#app',
            data: {
              price: 10,
              count: 2
            },
            computed: {
              totalPrice: function() {
                return this.total(this.price, this.count);
              },
              total: function(price, count) {
                return price * count;
              }
            }
          })
        
      

      在上面的代碼中,我們定義了一個total函數(shù),用來接收傳遞過來的參數(shù)。在computed中定義了totalPrice屬性,調(diào)用total函數(shù)進(jìn)行計算,傳入要計算的值,從而獲得總價。

      2. 使用方法傳參

      computed傳參的另一種方式是通過methods方法來進(jìn)行傳參。這種方式適用于傳遞相同的值,但對不同的函數(shù)進(jìn)行計算的情況。

      
        
          new Vue({
            el: '#app',
            data: {
              price: 10,
              count: 2
            },
            computed: {
              totalPrice: function() {
                return this.total('discount', this.price, this.count);
              }
            },
            methods: {
              total: function(type, price, count) {
                switch (type) {
                  case 'discount':
                    return price * count * 0.8;
                    break;
                  case 'tax':
                    return price * count * 1.1;
                    break;
                  default:
                    return price * count;
                    break;
                }
              }
            }
          })
        
      

      在上面的代碼中,我們定義了一個total方法,接收三個參數(shù)來進(jìn)行計算。在computed中定義了totalPrice屬性,使用this調(diào)用total方法,并傳入?yún)?shù)來計算總價。

      三、computed傳參的優(yōu)劣勢

      1. 優(yōu)勢

      computed傳參的優(yōu)勢主要在于其靈活性??梢愿鶕?jù)不同的情況來使用不同的方法進(jìn)行計算,不必局限于某個特定的計算方式。同時,使用computed傳參可以減少代碼的冗余,讓代碼更加簡潔明了。

      2. 劣勢

      computed傳參可能存在的劣勢主要是在性能方面。由于依賴數(shù)據(jù)的變化會重新計算computed,如果computed處理的數(shù)據(jù)量比較大,或者計算方式比較復(fù)雜,可能會增加頁面的渲染時間,影響頁面的性能。

      四、總結(jié)

      computed傳參是Vue中一個比較靈活和強(qiáng)大的功能,使用computed傳參可以寫出簡潔、易讀、易維護(hù)的代碼,并且可以滿足多種計算需求。但需要注意的是,在處理數(shù)據(jù)量比較大或計算方式比較復(fù)雜的情況下,需要考慮性能問題。需要在靈活性和性能之間進(jìn)行權(quán)衡,選擇最優(yōu)的方式來使用computed傳參。

      聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
      10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
      請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
      免費領(lǐng)取
      今日已有369人領(lǐng)取成功
      劉同學(xué) 138****2860 剛剛成功領(lǐng)取
      王同學(xué) 131****2015 剛剛成功領(lǐng)取
      張同學(xué) 133****4652 剛剛成功領(lǐng)取
      李同學(xué) 135****8607 剛剛成功領(lǐng)取
      楊同學(xué) 132****5667 剛剛成功領(lǐng)取
      岳同學(xué) 134****6652 剛剛成功領(lǐng)取
      梁同學(xué) 157****2950 剛剛成功領(lǐng)取
      劉同學(xué) 189****1015 剛剛成功領(lǐng)取
      張同學(xué) 155****4678 剛剛成功領(lǐng)取
      鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
      董同學(xué) 138****2867 剛剛成功領(lǐng)取
      周同學(xué) 136****3602 剛剛成功領(lǐng)取
      相關(guān)推薦HOT