vue.js实现购物车功能2.0版本

朴灿烈づ我的快乐病毒、 2021-12-24 00:07 201阅读 0赞

在上一个程序中，我只是简单的实现了商品增减时自动计算总金额，在这次的案列中，我增加了全选、反选的功能。

新增了一项是否选中该商品的功能，总价变成只计算选中商品的总结，同时提供一个全选的按钮。

ps:这个完全是我自己想的，中间遇到了些问题。网上很多案例都是把选中与否放在数据的数据结构之中，我觉得这个不符合我们实际的开发情况，于是就一直在想怎么设计数据去控制是否被选中，当然最后解决出来之后就觉得。。。怎么简单还花那么久，没办法，刚入门。

<!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>

![744435-20190611170340666-1683894327.png][]

转载于:https://www.cnblogs.com/baby-lijun/p/11004712.html

[744435-20190611170340666-1683894327.png]: /images/20211223/679c106ea62549ada2600bfa68d8afa9.png