vue购物车案例

基本购物车

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-offset-3 col-md-6" style="margin-top: 20px">
                <h1>购物车案例</h1>
                <table class="table table-bordered">
                    <tr>
                        <td>商品名字</td>
                        <td>价格</td>
                        <td>数量</td>
                    </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>
                <br>
                选中的商品：{{checkGroup}}
                <br>
                总价格:{{getPrice()}}
            </div>
        </div>
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],


        },
        methods: {
            getPrice() {
                var total = 0
                //方式一： i是索引,循环选中的商品，基于迭代的循环
                // for (i in this.checkGroup) {
                //     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
                // for (v of this.checkGroup) {
                //     total += v.price * v.number
                // }

                // 方式四：forEach  可迭代对象(数组)的方法
                this.checkGroup.forEach((v,i)=> {
                    total += v.price * v.number
                })
                return total
            }
        }
    })
</script>
</html>
复制代码

全选全不选

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-offset-3 col-md-6" style="margin-top: 20px">
                <h1>购物车案例</h1>
                <table class="table table-bordered">
                    <tr>
                        <td>商品名字</td>
                        <td>价格</td>
                        <td>数量</td>
                        <td>全选/全不选 <input type="checkbox" v-model="allCheck" @change="handleAll"></td>
                    </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="checkOne"></td>
                    </tr>
                </table>
                <br>
                选中的商品：{{checkGroup}}
                <br>
                总价格:{{getPrice()}}
                <br>
                是否全选:{{allCheck}}
            </div>
        </div>
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],
            allCheck:false


        },
        methods: {
            getPrice() {
                var total = 0
                this.checkGroup.forEach((v, i) => {
                    total += v.price * v.number
                })
                return total
            },
            handleAll(){
                if(this.allCheck){
                    this.checkGroup=this.dataList
                }else {
                    this.checkGroup=[]
                }
            },
            checkOne(){
                // if(this.checkGroup.length==this.dataList.length){
                //     this.allCheck=true
                // }else {
                //     this.allCheck=false
                // }
                // js中 ==  和 === 区别：==比较的是值，===值和类型
                this.allCheck=(this.checkGroup.length===this.dataList.length)
            }
        }
    })
</script>
</html>
复制代码

商品数量增加与减少

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-offset-3 col-md-6" style="margin-top: 20px">
                <h1>购物车案例</h1>
                <table class="table table-bordered">
                    <tr>
                        <td>商品名字</td>
                        <td>价格</td>
                        <td>数量</td>
                        <td>全选/全不选 <input type="checkbox" v-model="allCheck" @change="handleAll"></td>
                    </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="checkOne"></td>
                    </tr>
                </table>
                <br>
                选中的商品：{{checkGroup}}
                <br>
                总价格:{{getPrice()}}
                <br>
                是否全选:{{allCheck}}
            </div>
        </div>
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],
            allCheck: false


        },
        methods: {
            getPrice() {
                var total = 0
                this.checkGroup.forEach((v, i) => {
                    total += v.price * v.number
                })
                return total
            },
            handleAll() {
                if (this.allCheck) {
                    this.checkGroup = this.dataList
                } else {
                    this.checkGroup = []
                }
            },
            checkOne() {
                // if(this.checkGroup.length==this.dataList.length){
                //     this.allCheck=true
                // }else {
                //     this.allCheck=false
                // }
                // js中 ==  和 === 区别：==比较的是值，===值和类型
                this.allCheck = (this.checkGroup.length === this.dataList.length)
            },
            handleCount(item) {
                if (item.number == 1) {
                    alert("不能再少了，受不了了")
                } else {
                    item.number--
                }
            }
        }
    })
</script>
</html>
复制代码

 

posted @   椰子皮0oo0  阅读(92)  评论(0)  编辑  收藏  举报
相关博文：
· vue快速入门
· vue进阶
· vue 购物车实例
· Vue实战-购物车案例
· vue 购物车实例2
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
1
点击右上角即可分享
微信分享提示