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 >        <div >            <div >                <h2 >购物车案例</h2>                <table >                    <!--表头-->                    <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" >购物车:购物车为空</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 >        <div >            <div >                <h2 >购物车案例</h2>                <table >                    <!--表头-->                    <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" >购物车:购物车为空</p>                <!--计算总价-->                <hr>                <p >总价:{{totalPrice()}}￥</p>                <hr>                <!--是否全选--><!--                <p>是否全选： {{checkall}}</p>-->                <div >                    <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 >        <div >            <div >                <h2 >购物车案例</h2>                <table >                    <!--表头-->                    <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" >购物车:购物车为空</p>                <!--计算总价-->                <hr>                <p >总价:{{totalPrice()}}￥</p>                <hr>                <!--是否全选--><!--                <p>是否全选： {{checkall}}</p>-->                <div >                    <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>

不足：下面的提示信息可以隐藏，个人只是为了提示，商品删除没有写自行实现

---

如有错误请指正感谢~