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

資訊專欄INFORMATION COLUMN

Vue 2 | Part 6 計算屬性

legendmohe / 1749人閱讀

摘要：另外初始化自己手上持有現(xiàn)金。讓購入的游戲顯示在已入清單中，并從愿望清單中移除直接用方法篩選出所有字段為的游戲，結(jié)果綁定到已入清單。計算當前余額最后，使用現(xiàn)金總額減掉已入游戲的總價，就得到當前余額啦。

在這之前，我們往html里面綁定的數(shù)據(jù)，都是非常直接的。給定一個值，就直接綁定它了。

但是更多的情況下，我們在綁定之前，需要對這些數(shù)據(jù)做一些處理。這就是計算屬性發(fā)揮作用的地方了。

有了前面各期知識的加成，這次我們來一個好玩的。我們做一個愿望清單，列表里面是想買的PS4游戲：

點擊購買某個游戲之后，它會自動從愿望清單移除，出現(xiàn)在已入游戲列表里面。同時，余額也相應減少：

當然，這里不涉及任何的真實貨幣結(jié)算，只是點擊一下按鈕，做出余額相應減少和兩邊列表更新的效果。

注：游戲價格是PSN上面2016圣誕元旦這段期間的價格，查的當時是港元，所以我們整個demo就使用港元作為貨幣單位了。

為了避免篇幅過長，這一期的代碼只截取重點部分，完整的代碼請看github代碼庫的版本。

本期的簡單database

我把查詢到的數(shù)據(jù)弄成了一個小DB，放在gamesDB.js文件里面，主要是用來做列表循環(huán)，下面是它的樣子：

// gamesDB.js
var games = [
    {
        "id"       : 0,
        "name"     : "神秘海域123",
        "img"      : "../static/images/uncharted-collection.jpg",
        "price"    : 160.80,
        "purchased": false
    },
    /* 余下的部分省略 */
]

purchased字段表示該游戲是否已購入，初始時所有為false。

HTML拆解

使用大胡子語法綁定余額myBalance

在這個demo里面會全部使用大胡子語法。因為會遇到像下面這樣，需要在數(shù)據(jù)前后加額外文字的情況。如果一些地方用v-text，一些地方用大胡子，代碼會很難分辨，所以就統(tǒng)一用大胡子了。

另外，跟金錢有關(guān)的部分都會使用toFixed方法來保留兩位小數(shù)。


    
我的余額：HK$ {{ myBalance.toFixed(2) }}

v-for循環(huán)列表

循環(huán)愿望清單wishList：


    
    
    

        
{{ item.name }}

        
HK$ {{ item.price.toFixed(2) }}

已入游戲列表myGames的循環(huán)同理，只是會減少一些UI：


    
    

        
{{ item.name }}
初始的JS

window.games是為了方便，我在gamesDB.js里面直接把db掛了在window對象下。在實際工作用請一定要避免這種做法。引入了gamesDB.js之后，data.games就有了我準備好的數(shù)據(jù)庫里面的數(shù)據(jù)了。

另外初始化自己手上持有現(xiàn)金5000。




var app = new Vue({
    el: "#app",
    data: {
        games: window.games,
        myCash: 5000
    }
})
處理點擊事件

通過ID找到對應的游戲，修改purchased字段為true。ID會在html的綁定中傳入：@click="buyGame(item.id)"。

var app = new Vue({
    el: "#app",
    data: {
        games: window.games,
        myCash: 5000
    },
    methods: {
        buyGame: function (id) {
            this.games[id].purchased = true
        }
    }
})
讓購入的游戲顯示在已入清單中，并從愿望清單中移除

直接用filter方法篩選出所有purchased字段為true的游戲，結(jié)果綁定到已入清單。同理，愿望清單中只篩選字段值為false的游戲。

var app = new Vue({
    el: "#app",
    data: {
        games: window.games,
        myCash: 5000
    },
    methods: {
        buyGame: function (id) {
            this.games[id].purchased = true
        }
    },
    computed: {
        wishList: function () {
            return this.games.filter(function (game) {
                return !game.purchased
            })
        },
        myGames: function () {
            return this.games.filter(function (game) {
                return game.purchased
            })
        }    
    }
})

在這里大家肯定都有一個疑問，computed里面的方法和methods里面的方法，到底有什么不同？它們看上去都是一樣的啊。

區(qū)別就在于computed里面的方法會進行緩存，只要方法依賴的數(shù)據(jù)源不改變，它們就不會被執(zhí)行。我們用一個很簡單的例子快速說明一下：

在我的余額下面插入一個h2：

data.myCash: {{ showCash }}

在計算屬性里面增加一個showCash方法，直接console里面log一下就知道它有沒有執(zhí)行過：

var app = new Vue({
    /* 省略其它代碼 */
    computed: {
        showCash: function () {
            console.log("showCash in computed properties")
            // 注意這里是myCash，它在這次的例子中是一直不變的
            return this.myCash
        }
    }
})

進入頁面的時候執(zhí)行了一次（留意一下，不變的數(shù)字是為了說明而新加的h2，用鼠標選中了文字的）：

點擊購買游戲（圖中可以看到神秘海域已經(jīng)點擊購買了，所以不在愿望清單中），console中沒有出現(xiàn)新log，說明computed里面的showCash方法沒有再次執(zhí)行：

也就是說，如果showCash方法認為它所依賴的數(shù)據(jù)this.myCash沒有發(fā)生變化，它就不會再執(zhí)行，而是直接返回之前已經(jīng)計算好的值。

只有在它依賴的數(shù)據(jù)修改的情況下，才會進行更新：

然后我們修改一下html里面的調(diào)用方式，在methods里面增加同樣的方法：

記得要先屏蔽掉computed里面的同名方法，否則會報錯。

data.myCash: {{ showCash() }}
var app = new Vue({
    /* 省略其它代碼 */
    methods: {
        showCash: function () {
            console.log("showCash in methods")
            return this.myCash
        }
    }
})

進入頁面的時候執(zhí)行了一次：

點擊購買游戲，log增加：

可見，即使數(shù)據(jù)源沒有改變，methods里面的showCash方法依然會執(zhí)行多次。

計算當前余額

最后，使用現(xiàn)金總額減掉已入游戲的總價，就得到當前余額啦。

var app = new Vue({
    // 省略其它代碼
    computed: {
        myBalance: function () {
            var sum = 0
            this.myGames.forEach(function (item, index) {
                sum += item.price
            })
            return this.myCash - sum
        }
    }
})

這期就到這里，敬請期待下一期：組件。

寫在最后

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，為求一贊，自制 本期視頻攻略 在此。

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

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

相關(guān)文章

  • VUE - MVVM - part10 - Computed

    摘要：了解之后我們來實現(xiàn)它，同樣的為了方便理解我寫成了一個類這里的一般是的實例將屬性代理到實例下的構(gòu)造函數(shù)我們實現(xiàn)了代理屬性和更新計算屬性的值，同時依賴沒變化時，也是不會觸發(fā)的更新，解決了以上的個問題。 看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。 回顧 先捋一下，之前我們實現(xiàn)的 Vue 類，主要有一下的功能： 屬性和方法的代理 proxy 監(jiān)聽屬性 watche...

    callmewhy 評論0 收藏0

  • Vue 2 | 基礎API系列文章合集

    摘要：在大家的鞭策和鼓勵下，這個基礎的系列終于完成了。關(guān)于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。 在大家的鞭策和鼓勵下，這個基礎API的系列終于完成了。所幸是沒有真的更到一百期才完結(jié)（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關(guān)掉專欄，但由于...

    instein 評論0 收藏0

  • Vue 2 | Part 7 組件

    摘要：因為這里會舉一連串的例子，就直接用來作為組件名稱了。這是一個組件名稱定義的時候有一點需要注意的，就是要使用中劃線分詞。在組件的方法里面返回數(shù)據(jù)就可以了。在的組件中間定義的內(nèi)容，就會被插入到的位置中去。敬請期待下一期，組件通信。 界面寫多了，大家應該都會想到一個問題：JS的模塊寫好以后可以在多個地方重復使用，HTML有沒有辦法做到呢？Vue給了我們這個能力，使用組件，就可以輕松做到。 最...

    xcold 評論0 收藏0

  • Vue 2 | Part 5 列表渲染和事件監(jiān)聽

    之前在vue里面綁定數(shù)據(jù)，都只是單個地綁定。這期我們來看一下怎樣渲染列表，然后通過事件監(jiān)聽方法往列表里面增加item。 列表渲染 廢話不多說，直接上代碼： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...

    Nekron 評論0 收藏0

  • VUE - MVVM - part5 - Observe

    摘要：具體代碼執(zhí)行方式進入到的目錄下，命令行運行即可。確保為一個對象如果對象下有則不需要再次生成函數(shù)返回該對象的實例，這里判斷了如果該對象下已經(jīng)有實例，則直接返回，不再去生產(chǎn)實例。這就確保了一個對象下的實例僅被實例化一次。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 回顧 在 step4 中，我們大致實現(xiàn)了一個 MVVM 的框架，由3個部分組成： defineRe...

    xi4oh4o 評論0 收藏0

發(fā)表評論

0條評論

legendmohe

男|高級講師

TA的文章

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