成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue基礎(chǔ)之計算屬性

android_c / 2461人閱讀

摘要:計算屬性這時,我們就可以輕松應(yīng)用結(jié)果在多個地方,而且代碼還看起來更清晰了。每個計算屬性都包括和,我們平時默認用到的是來讀取。計算屬性依賴的數(shù)據(jù)變化時,它才會重新取值,只要依賴數(shù)據(jù)不變化,它就不更新,可以緩存數(shù)據(jù)。

適用場景

設(shè)想一個場景,你需要得到一個復雜運算/邏輯的返回值,利用模板內(nèi)的表達又過長且難以閱讀和維護,這時計算屬性就可以很好的解決你的問題??聪旅娴睦樱?/p>




  
  
  
  computed
  


  
{{message.split(" ").reverse().join(" ")}}

{{message.split(" ").reverse().join(" ")}}這個表達式共進行了三種操作,但看起來并不是很清晰,并且當我們想在其他地方也用到最終值時就需要復制、粘貼冗長的一大段代碼,所以這時候計算屬性就可以及時的發(fā)揮它巨大的作用。




  
  
  
  computed
  


  
{{reverseText}}
{{reverseText}}
{{reverseText}}

這時,我們就可以輕松應(yīng)用結(jié)果在多個地方,而且代碼還看起來更清晰了。

使用方法

在計算屬性computed里可以完成各種復雜的邏輯(運算、函數(shù)調(diào)用),所有的計算屬性以函數(shù)的形式寫在computed里,最終返回計算結(jié)果,當message(data數(shù)據(jù))有任何變化,計算屬性會同時更新,并且更新視圖。

每個計算屬性都包括gettersetter,我們平時默認用到的是getter來讀取。




  
  
  
  computed
  


  
姓:{{firstName}}
名:{{lastName}}
姓名:{{fullName}}

默認調(diào)用時是用fullName的getter方法讀取數(shù)據(jù),想使用set方式時:

姓:{{firstName}}
名:{{lastName}}
姓名:{{fullName = "一 枚蛋Oops"}}
計算屬性緩存

有人有可能會問,為什么不使用methods直接函數(shù)調(diào)用,這里就要區(qū)分一下他們的區(qū)別了

methods:只要重新渲染就會更新,函數(shù)就會執(zhí)行。

computed:計算屬性依賴的數(shù)據(jù)變化時,它才會重新取值,只要依賴數(shù)據(jù)不變化,它就不更新,可以緩存數(shù)據(jù)。

所以到底使用哪個屬性是依據(jù)你的項目需求,看看你需不需要緩存。

以上是本期全部內(nèi)容,欲知后事如何,請聽下回分解<( ̄︶ ̄)↗[GO!]

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/53851.html

相關(guān)文章

  • # vue.js vue.js基礎(chǔ)理解

    摘要:之對基礎(chǔ)理解構(gòu)造器是一個構(gòu)造函數(shù),編程中稱之為構(gòu)造器每一個都是一個構(gòu)造函數(shù)的實例,這個過程叫做實例化構(gòu)造函數(shù)需要將其實例化后才會啟用構(gòu)造器要求實例化時需要傳入一個選項對象組件其實都是被擴展的實例。 vue.js 之 對vue.js基礎(chǔ)理解 Vue構(gòu)造器 1 . Vue.js是一個構(gòu)造函數(shù),編程中稱之為構(gòu)造器 2 . 每一個new Vue() 都是一個Vue構(gòu)造函數(shù)的實例,這個過程叫...

    Rainie 評論0 收藏0
  • Vue基礎(chǔ)計算屬性

    摘要:計算屬性這時,我們就可以輕松應(yīng)用結(jié)果在多個地方,而且代碼還看起來更清晰了。每個計算屬性都包括和,我們平時默認用到的是來讀取。計算屬性依賴的數(shù)據(jù)變化時,它才會重新取值,只要依賴數(shù)據(jù)不變化,它就不更新,可以緩存數(shù)據(jù)。 適用場景 設(shè)想一個場景,你需要得到一個復雜運算/邏輯的返回值,利用模板內(nèi)的表達又過長且難以閱讀和維護,這時計算屬性就可以很好的解決你的問題??聪旅娴睦樱? ...

    wuyangnju 評論0 收藏0
  • Vue基礎(chǔ)計算屬性

    摘要:計算屬性這時,我們就可以輕松應(yīng)用結(jié)果在多個地方,而且代碼還看起來更清晰了。每個計算屬性都包括和,我們平時默認用到的是來讀取。計算屬性依賴的數(shù)據(jù)變化時,它才會重新取值,只要依賴數(shù)據(jù)不變化,它就不更新,可以緩存數(shù)據(jù)。 適用場景 設(shè)想一個場景,你需要得到一個復雜運算/邏輯的返回值,利用模板內(nèi)的表達又過長且難以閱讀和維護,這時計算屬性就可以很好的解決你的問題。看下面的例子: ...

    huaixiaoz 評論0 收藏0
  • vue.js入門教程基礎(chǔ)語法

    摘要:與綁定數(shù)據(jù)綁定一個常見需求是操作元素的列表和它的內(nèi)聯(lián)樣式。兩者只能選其一對象語法我們可以傳給一個對象,以動態(tài)地切換。注意不支持語法。相比之下,簡單得多元素始終被編譯并保留,只是簡單地基于切換。這意味著將分別重復運行于每個循環(huán)中。 vue Class 與 Style 綁定 數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因為它們都是屬性,我們可以用 v-bind 處理...

    pumpkin9 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<