Vue實戰-購物車案例普通購物車實現的功能：添加商品到購物車，計算總價 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>購物車</title> <script src="https://cdn.bootc ...

Vue實戰-購物車案例

Vue快速入門（二）

普通購物車

實現的功能：添加商品到購物車，計算總價

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">購物車案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表頭-->
                    <tr>
                        <th>商品名稱</th>
                        <th>商品價格</th>
                        <th>商品數量</th>
                        <th>添加購物車</th>
                    </tr>
                    <!--表體-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>{{data.number}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data"></td>
                    </tr>
                </table>
                <!--購物車選中狀態 -->
                <hr>
                <p v-if="checkGroup.length>0">購物車:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">購物車:購物車為空</p>
                <!--計算總價-->
                <hr>
                總價:{{totalPrice()}}
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            //商品數據
            dataList: [
                {name: 'Python實戰', price: 66, number: 2},
                {name: 'Linux實戰', price: 55, number: 1},
                {name: 'Java實戰', price: 77, number: 1},
            ],
            //購物車
            checkGroup: [],
        },
        methods: {
            //計算總價
            totalPrice(){
                // 總價初始化
                var total = 0
                for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
                }
                return total
            }
        }
    })
</script>
</html>

PS：for迴圈的多種形式

上面我們使用for (i in 數組/對象)的形式，在js中for迴圈常用的形式有四種

//方式一： i是索引,迴圈選中的商品，基於迭代的迴圈
for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
 }

// 方式二： 基於索引的迴圈，最普通的
for (var i=0;i<this.checkGroup.length;i++) {
	total += this.checkGroup[i].price * this.checkGroup[i].number
	}

 //方式三： 基於迭代 for of (es6)
for (v of this.checkGroup) {
	total += v.price * v.number
 }

 // 方式四：forEach  可迭代對象(數組)的方法，數組而言v是值，i是索引
this.checkGroup.forEach(function(v,i){
  this.checkGroup.forEach((v,i)=>{
    total += v.price * v.number
                })

進階購物車

一鍵加入購物車功能實現

基於普通購物車實現功能：一鍵添加購物車功能

通過v-model雙向綁定實現，input框綁定change事件， checkbox選中true反之false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">購物車案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表頭-->
                    <tr>
                        <th>商品名稱</th>
                        <th>商品價格</th>
                        <th>商品數量</th>
                        <!-- <th>添加購物車</th>-->
                        <th>全選/取消全選&nbsp;<input type="checkbox" v-model="checkall" @change="handleAll"></th>

                    </tr>
                    <!--表體-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>{{data.number}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>
                    </tr>
                </table>
                <!--購物車選中狀態 -->
                <hr>
                <p v-if="checkGroup.length>0">購物車:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">購物車:購物車為空</p>
                <!--計算總價-->
                <hr>
                <p style="font-size: 20px">總價:{{totalPrice()}}￥</p>
                <hr>
                <!--是否全選-->
<!--                <p>是否全選： {{checkall}}</p>-->
                <div style="font-size: 20px">
                    <p v-if="checkall === false">是否全選：否 ---  {{checkall}}</p>
                    <p v-else-if="checkall === true">是否全選：是 ---  {{checkall}}</p>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',

        data: {
            //商品數據
            dataList: [
                {name: 'Python實戰', price: 66, number: 2},
                {name: 'Linux實戰', price: 55, number: 1},
                {name: 'Java實戰', price: 77, number: 1},

            ],
            //購物車
            checkGroup: [],
            //全選,預設不全選
            checkall:false
        },
        methods: {
            //計算總價
            totalPrice(){
                // 總價初始化
                var total = 0
                for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
                }
                return total
            },
            //處理全選
            handleAll(){
                if (this.checkall){
                    //全選
                    this.checkGroup = this.dataList
                }else {
                    this.checkGroup=[]
                }
            },
            handleOne(){
                //全選
                if (this.checkGroup.length==this.dataList.length){
                    this.checkall=true
                //不全選
                }else {
                    this.checkall=false
                }
            }
        }
    })
</script>
</html>

商品數量加減的實現

實現功能：通過添加+，-樣式來控制商品數量的加減

註意：這裡暫時不考慮庫存的情況，且減少商品數量做單獨處理，解決減少數量小於1的情況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">購物車案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表頭-->
                    <tr>
                        <th>商品名稱</th>
                        <th>商品價格</th>
                        <th>商品數量</th>
                        <!-- <th>添加購物車</th>-->
                        <th>全選/取消全選&nbsp;<input type="checkbox" v-model="checkall" @change="handleAll"></th>

                    </tr>
                    <!--表體-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>
                        <!-- 商品減少 -->
                            <button @click="handleCount(data)">-</button>
                            {{data.number}}
                        <!-- 商品增加 -->
                            <button @click="data.number++">+</button>
                        </td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>
                    </tr>
                </table>
                <!--購物車選中狀態 -->
                <hr>
                <p v-if="checkGroup.length>0">購物車:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">購物車:購物車為空</p>
                <!--計算總價-->
                <hr>
                <p style="font-size: 20px">總價:{{totalPrice()}}￥</p>
                <hr>
                <!--是否全選-->
<!--                <p>是否全選： {{checkall}}</p>-->
                <div style="font-size: 20px">
                    <p v-if="checkall === false">是否全選：否 ---  {{checkall}}</p>
                    <p v-else-if="checkall === true">是否全選：是 ---  {{checkall}}</p>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',

        data: {
            //商品數據
            dataList: [
                {name: 'Python實戰', price: 66, number: 2},
                {name: 'Linux實戰', price: 55, number: 1},
                {name: 'Java實戰', price: 77, number: 1},

            ],
            //購物車
            checkGroup: [],
            //全選,預設不全選
            checkall:false
        },
        methods: {
            //計算總價
            totalPrice(){
                // 總價初始化
                var total = 0
                for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
                }
                return total
            },
            //處理全選
            handleAll(){
                if (this.checkall){
                    //全選
                    this.checkGroup = this.dataList
                }else {
                    this.checkGroup=[]
                }
            },
            handleOne(){
                //全選
                if (this.checkGroup.length==this.dataList.length){
                    this.checkall=true
                //不全選
                }else {
                    this.checkall=false
                }
            },
            //商品減少
            handleCount(data){
                if (data.number<=1){
                    alert('不能再少了')
                }
                else {
                    data.number--
                }
            }
        }
    })
</script>
</html>

不足：下麵的提示信息可以隱藏，個人只是為了提示，商品刪除沒有寫自行實現

如有錯誤請指正感謝~