vue.js實現購物車功能2.0版本

時間 2019-11-25

標籤 vue.js vue 實現購物車功能 2.0 版本欄目 JavaScript 简体版

原文原文鏈接

在上一個程序中，我只是簡單的實現了商品增減時自動計算總金額，在此次的案列中，我增長了全選、反選的功能。javascript

新增了一項是否選中該商品的功能，總價變成只計算選中商品的總結，同時提供一個全選的按鈕。css

ps:這個徹底是我本身想的，中間遇到了些問題。網上不少案例都是把選中與否放在數據的數據結構之中，我以爲這個不符合咱們實際的開發狀況，因而就一直在想怎麼設計數據去控制是否被選中，固然最後解決出來以後就以爲。。。怎麼簡單還花那麼久，沒辦法，剛入門。html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue</title>
</head>
<style type="text/css">
    *{list-style: none;}
    table,tr,td,th{border: 1px solid #000;border-collapse: collapse;}
</style>
<body>
<div id="app">
    
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" name="" :checked="isAll" @click="checkAll()"></th>
                <th>序號</th>
                <th>書名</th>
                <th>單價</th>
                <th>數量</th>
                <th>合計</th>
            </tr>            
        </thead>
        <tbody>
            <tr v-for = "(book,index) in goods">
                <td><input type="checkbox" v-model="isCheck" :value="book.name" @change="test()"></td>
                <td>{{index}}</td>
                <td>{{book.name}}</td>
                <td>{{book.price}}</td>
                <td><button @click="minus(index)" :disabled = "book.number===1" >-</button>{{book.number}}<button @click="add(index)">+</button></td>
                <td>{{book.price*book.number}}</td>
            </tr>
        </tbody>
    </table>    
    <span>被選書目提示：{{isCheck}}</span>
    <p>總價：{{total}}</p>
</div>

<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            goods:[
                {name:"vue.js實戰",price:80,number:1},
                {name:"vue.js權威指南",price:60,number:3},
                {name:"vue.js2.0漸進式前端解決方案",price:50,number:2}
            ],
            isAll:false,//控制是否全選 
            total:0,//選中購買的書目的總金額
            isCheck:[]//控制哪些記錄被選中，選中的話則把那個書的name放到裏面來

        },
        methods:{
            minus :function(index){//書目數量減1
                this.goods[index].number--;
                this.calTotal();//減完須要從新計算總金額
            },
            add:function(index){//書目數量加1
                this.goods[index].number++;
                this.calTotal();//減完須要從新計算總金額
            },
            checkAll:function(){
                if(this.isAll){//實現反選
                    this.isAll = !this.isAll;
                    this.isCheck = [];
                }else{//實現全選
                    this.isAll = true;
                    this.isCheck = [];
                    //全選以後把所有書的name放到isCheck的這個數組裏面，表明選中
                    for(var i = 0;i<this.goods.length;i++){
                        this.isCheck.push(this.goods[i].name);
                    }
                }
                this.calTotal();
                
            },
            calTotal:function(){//計算被選中的記錄的總金額
                this.total = 0;
                for(var i = 0;i<this.isCheck.length;i++){
                    var name = this.isCheck[i];
                    for(var j = 0;j<this.goods.length;j++){
                        if(this.goods[j].name == name){
                            this.total += this.goods[j].price * this.goods[j].number;
                        }
                    }
                }
            },
            test:function(){
            //每次選中或者不選中記錄都要計算金額
            //若是選中的記錄有3條表明所有選中了，這時要人爲的把全選框選中，當選中的記錄少於3條時，把全選框取消            
                if(this.isCheck.length != this.goods.length){
                    this.isAll = false;
                }else{
                    this.isAll = true;
                }
                this.calTotal();
            }
            
        }
    });
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。