Vue 在購物車場景下的應用

阿新 • • 發佈：2019-01-16

購物車場景需求：

商品、店鋪、購物車的選擇
商品刪除

測試資料

var _list = [{
    checked: false,
    goods: [{
        name: "商品1",
        price: 23,
        checked: false
    }]
}, {
    checked: false,
    goods: [{
        name: "商品2",
        price: 20,
        checked: false
    }, {
        name: "商品3",
        price: 30 
,
        checked: false
    }]
}];

店鋪物件組成購物車陣列 _list
商品物件組成店鋪物件下的商品陣列 goods
每個商品和店鋪都有自己的 checked 欄位

一. 選擇商品

選擇商品
選擇店鋪下的所有商品
選擇購物車裡的所有商品

資料繫結

<body class="app">
    <input type="checkbox" v-if="list.length" v-model="checkedAll">
    <div v-for="(shopI, shop) in list" class="shop" 
>
        <input type="checkbox" v-model="shop.checked">
        <div v-for="(goodI, good) in shop.goods" class="good">
            <input type="checkbox" v-model="good.checked">
            <span v-html="good.name"></span>
            <span v-html="good.age"></span 
>
        </div>
    </div>
</body>

var vue = new Vue({
    el: '.app',
    data: {
        list: _list
    }
});

監聽購物車全選

computed: {
    checkedAll: function() {
        return this.checkedShopsCount == this.list.length;
    },
    checkedShopsCount: function() {
        var i = 0;
        this.list.forEach(function(item) {
            if (item.checked == true) i++;
        });
        return i;
    }
}

當店鋪選擇數（checkedShopsCount）等於店鋪數（list.length）時，購物車全選（checkedAll）為 true

商品 & 店鋪選擇事件

<input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
<div v-for="(shopI, shop) in list">
    <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
    <div v-for="(goodI, good) in shop.goods">
        <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
        <span v-html="good.name"></span>
        <span v-html="good.age"></span>
    </div>
</div>

methods: {
    setAllChecked: function(e) {
        this.list.forEach(function(shop) {
            shop.checked = e.target.checked;
            shop.goods.forEach(function(good) {
                good.checked = e.target.checked;
            });
        });
    },
    setGoodChecked: function(shop) {
        shop.goods.forEach(function(good) {
            good.checked = shop.checked;
        });
    },
    setShopChecked: function(good, shop) {
        if (!good.checked) {
            shop.checked = false;
        } else {
            // 檢查店鋪是否存在 checked 為 false 的商品
            shop.checked = !shop.goods.find(function(good) {
                return !good.checked;
            });
        }
    }
}

選擇購物車時執行 setAllChecked，此時選擇所有商品和店鋪
選擇店鋪時執行 setGoodChecked，此時選擇該店鋪下所有商品
選擇商品時執行 setShopChecked
- 當商品 checked 為 false 時，取消選擇當前店鋪
- 當商品 checked 為 true 時，判斷當前店鋪是否選擇了所有商品，是則選擇當前店鋪，否則取消選擇當前店鋪

二、刪除商品

<input type="button" value="刪除" @click="deleteGood(shop,goodI,list,shopI)">

methods: {
    deleteGood: function(shop,goodI,list,shopI) {
        shop.goods.splice(goodI, 1);
        if (shop.goods.length==0) {
            list.splice(shopI, 1);
        }
    }
}

全部程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的購物車</title>
    <script src="vue.min.js"></script>
</head>
<body class="app">
    <input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
    <div v-for="(shopI, shop) in list">
        <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
        <div v-for="(goodI, good) in shop.goods">
            <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
            <span v-html="good.name"></span>
            <span v-html="good.age"></span>
            <input type="button" value="刪除" @click="deleteGood(shop,goodI,list,shopI)">
        </div>
    </div>
</body>
<script>
var _list = [{
    checked: false,
    goods: [{
        name: "商品1",
        money: 23,
        checked: false
    }]
}, {
    checked: false,
    goods: [{
        name: "商品2",
        money: 20,
        checked: false
    }, {
        name: "商品3",
        money: 30,
        checked: false
    }]
}];
var vue = new Vue({
    el: '.app',
    data: {
        list: _list
    },
    computed: {
        checkedAll: function() {
            return this.checkedShopsCount == this.list.length;
        },
        checkedShopsCount: function() {
            var i = 0;
            this.list.forEach(function(item) {
                if (item.checked == true) i++;
            });
            return i;
        }
    },
    methods: {
        setGoodChecked: function(shop) {
            shop.goods.forEach(function(good) {
                good.checked = shop.checked;
            });
        },
        setShopChecked: function(good, shop) {
            if (!good.checked) {
                shop.checked = false;
            } else {
                shop.checked = !shop.goods.find(function(good) {
                    return !good.checked;
                });
            }
        },
        setAllChecked: function(e) {
            this.list.forEach(function(shop) {
                shop.checked = e.target.checked;
                shop.goods.forEach(function(good) {
                    good.checked = e.target.checked;
                });
            });
        },
        deleteGood: function(shop, goodI, list, shopI) {
            shop.goods.splice(goodI, 1);
            if (shop.goods.length == 0) {
                list.splice(shopI, 1);
            }
        }
    }
});
</script>
</html>

Vue 在購物車場景下的應用

購物車場景需求：商品、店鋪、購物車的選擇商品刪除測試資料 var _list = [{ checked: false, goods: [{ name: "

【Vue】淺談Vue不同場景下組件間的數據交流

事件不同 name usm quest 數據流這就是 ring des 淺談Vue不同場景下組件間的數據“交流” Vue的官方文檔可以說是很詳細了。在我看來，它和react等其他框架文檔一樣，講述的方式的更多的是“方法論&

vector和list有什麼區別？分別在什麼場景下應用？

Vector:順序表優點：和陣列類似開闢一段連續的空間，並且支援隨機訪問，所以它的查詢效率高其時間複雜度O(1)。缺點：由於開闢一段連續的空間，所以插入刪除會需要對資料進行移動比較麻煩，時間複雜度O（n），另外當空間不足時還需要進行擴容。 List：連

【問答集錦】人工智能／機器學習技術在電商場景下的應用

人工智能阿裏巴巴機器學習近年來阿裏不斷運用深度學習、強化學習等人工智能領域的相關知識優化自身電商平臺的搜索引擎和推薦系統，讓其從冷冰冰的系統不斷成長為越來越懂用戶的智能購物助手。　　日前，《盡在雙11》人工智能部分執筆人&阿裏技術專家樂田與仁重就 “人工智能／機器學習技術在電

柔性電子綜述2012 ---在醫療，汽車行業，人機介面，移動裝置以及其他場景下的可能應用

Flexible Electronics: The Next Ubiquitous Platform 雜誌: PROCEEDINGS OF THE IEEE author: Arokia Nathan 2012的一篇柔性電子的綜述，主要講述柔性電子領域的薄膜材料和技術，以及思考未

DROP DB或DROP TABLE場景下藉助SQL Thread快速應用binlog恢復方案

【問題】假設有這種場景，誤操作DROP DB或TABLE，常規的恢復操作是還原全備份，並用mysqlbinlog追加到drop操作前的位置。如果需要恢復的binlog的日誌量比較大而我們只希望恢復某個DB或某張表，常規操作會花費較長的時間。在網上看到了藉助SQL Thread來應用binlog的方

futureTask設計、場景、及高併發下應用

參考文章 FutureTask的cancel方法真的能停止掉一個正在執行的非同步任務嗎 FutureTask的用法及兩種常用的使用場景 https://blog.csdn.net/linchunquan/article/details/22382487 i

網際網路場景下快閃記憶體優化測試和應用

【編者的話】快閃記憶體在這幾年儲存領域發展非常快，應用也越來越廣泛，如何能更好的使用快閃記憶體，本次分享講一些快閃記憶體相關的優化和應用。快閃記憶體應用場景資料庫 NoSQL 分散式儲存 CDN 公有云儲存綜合上面幾種場景看，快閃記憶體主要適合有比較高的隨機IO需求和頻寬需求的場景。場景選

"Vue單頁式應用(Hash模式下 '/#/')分享出來的連結點開是首頁”問題解決

解決方案：頁面中轉，url重定向。 1，在static目錄下新建一個名為html的資料夾，在html資料夾中再新建一個redirect.html html中寫入以下內容 <script> let url = location.href.split

"1,問題：應用長期在後臺的場景下，進入前臺時，fragment顯示為空白 2,app框架大體實現： 1個activity+多個Fragment,使用的是add（）方法以及 hide(),show(

程式碼如下：

移動應用場景下，ip應該包括port,不帶埠號的ip已經沒有意義了。

在以移動應用快速發展的今天，對於客戶端源ip，port是識別客戶端的重要組成，因為基站的ip基本是共用的，只有ip+port才能標識一個客戶端連結，純ip只能相當於以前的接入商。所以現在以遷移應用為

高可用服務 AHAS 在消息隊列 MQ 削峰填谷場景下的應用

ktr current record 線程池 blog ignore messages pic amp 在消息隊列中，當消費者去消費消息的時候，無論是通過 pull 的方式還是 push 的方式，都可能會出現大批量的消息突刺。如果此時要處理所有消息，很可能會導致系統負載過高

高可用服務 AHAS 在訊息佇列 MQ 削峰填穀場景下的應用

開發十年，就只剩下這套架構體系了！ >>>

通過一個很常用的場景來展示vue資料驅動的應用

　　需求：可以動態增減組合條件來進行資料查詢。　　介面執行效果如下圖所示：　　介面第一次載入時，預設會顯示一個空的查詢條件，如下圖所示：　　　　點選“加”圖示，可以無限增加查詢條件，也可以點選“減”圖示刪除新增的查詢條件，如下圖所示：　　　　說明

Vue-cli開發SPA應用(試用初學者)

lang 淘寶 web 系統版本 window系統檢查運行 pri 使用Vue開發SPA（單頁面應用）估計各位博友都耳熟能詳了，這裏簡單概要一下使用vue-cli快速開發單頁面應用。本博文以window系統為例（雖然用的是Mac操作的，考慮到大多數博友是用window

vue-router單頁應用簡單示例（一）

問題 clas 做了設置 new scope 文件的 log target 請先完成了項目初始化，具體請看我另一篇博文。vue項目初始化看一下完成的效果圖，很典型的單頁應用。 .vue後綴名的單文件組件這裏先說一下我對組件的理解。組件，顧名思義就是一組元素組成的

vue-router單頁應用簡單示例（二）

數據 prop tps div -1 可重用性 example 定位 .com 我們先來理一下思路。圖1:main.js 引入vue,App.vue,router/index.js文件聲明要渲染的Id為app，將App.vue中的模版渲染到入口界面（就

asp.net core中負載均衡場景下http重定向https的問題

進行 urn 循環 == 是否美的 err add ddr 上周欣喜地發現，微軟官方終於針對 asp.net core 在使用負載均衡的情況下從 http 強制重定向至 https 的問題提供了解決方法。 app.UseForwardedHeaders(new Fo

【Hadoop】HA 場景下訪問 HDFS JAVA API Client

new mes inpu true stream node spa lba main 客戶端需要指定ns名稱，節點配置，ConfiguredFailoverProxyProvider等信息。代碼示例： package cn.itacst.hadoop.hdfs; i

場景下開發-企業註冊用戶信息修改流程

def 展示如果 show pri check object () 信息場景是企業用戶註冊完後,想更改企業信息 1.企業客戶申請流程2.客戶審核流程企業信息保存，銀行卡信息保存，提交審核(待提交，審核中，審核失敗，審核成功)判斷 OpenUpdateFlag3.更新圖片

Vue 在購物車場景下的應用

購物車場景需求：

測試資料

一. 選擇商品

資料繫結

監聽購物車全選

商品 & 店鋪選擇事件

二、刪除商品

全部程式碼

相關推薦