【vue讲解：购物车案例】

最新推荐文章于 2024-09-13 14:34:15 发布

无敌开心

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量1.1k

点赞数 13

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50556117/article/details/141135198

版权

1 购物车案例

1.1 基本购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>商品id</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodList">
                    <th scope="row">{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td>{{good.count}}</td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
            <h3> 总价格：{{getPrice()}}</h3>

        </div>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '短袖', price: 99, count: 2},
                {id: 2, name: '短裤', price: 39, count: 1},
                {id: 3, name: '短裙', price: 189, count: 6},
                {id: 4, name: '短袜', price: 8, count: 8},
                {id: 5, name: '长筒袜', price: 4, count: 88},
                {id: 6, name: '过膝袜', price: 5, count: 90},

            ],
            checkGoodList: []
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    // console.log(item)
                    total += item.price * item.count
                }
                return total
            }
        }
    })
</script>
</html>

1.2 全选全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>商品id</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodList">
                    <th scope="row">{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td>
                        {{good.count}}

                    </td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good" @change="handleCheckOne"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
            <h3>是否全选：{{checkAll}}</h3>
            <h3> 总价格：{{getPrice()}}</h3>

        </div>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '短袖', price: 99, count: 2},
                {id: 2, name: '短裤', price: 39, count: 1},
                {id: 3, name: '短裙', price: 189, count: 6},
                {id: 4, name: '短袜', price: 8, count: 8},
                {id: 5, name: '长筒袜', price: 4, count: 88},
                {id: 6, name: '过膝袜', price: 5, count: 90},

            ],
            checkGoodList: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    // console.log(item)
                    total += item.price * item.count
                }
                return total
            },
            handleCheckAll() {
                if (this.checkAll) {
                    //全选了
                    this.checkGoodList = this.goodList
                } else {
                    //全不选
                    this.checkGoodList = []
                }
            },
            handleCheckOne() {
                // 如果checkGoodList的长度等于商品总长度，说明全选了，让checkAll =true
                if (this.checkGoodList.length == this.goodList.length) {
                    this.checkAll = true
                } else {
                    // 只要长度不相等，都是false
                    this.checkAll = false
                }
            },

        }
    })
</script>
</html>

1.3 带加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>商品id</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodList">
                    <th scope="row">{{good.id}}</th>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td><span class="btn" @click="handleJian(good)">-</span>
                        <input type="text" v-model="good.count">
                        <span class="btn"@click="handleAdd(good)">+</span>
                    </td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good" @change="handleCheckOne"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
            <h3>是否全选：{{checkAll}}</h3>
            <h3> 总价格：{{getPrice()}}</h3>

        </div>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '短袖', price: 99, count: 2},
                {id: 2, name: '短裤', price: 39, count: 1},
                {id: 3, name: '短裙', price: 189, count: 6},
                {id: 4, name: '短袜', price: 8, count: 8},
                {id: 5, name: '长筒袜', price: 4, count: 88},
                {id: 6, name: '过膝袜', price: 5, count: 90},

            ],
            checkGoodList: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    // console.log(item)
                    total += item.price * item.count
                }
                return total
            },
            handleCheckAll() {
                if (this.checkAll) {
                    //全选了
                    this.checkGoodList = this.goodList
                } else {
                    //全不选
                    this.checkGoodList = []
                }
            },
            handleCheckOne() {
                // 如果checkGoodList的长度等于商品总长度，说明全选了，让checkAll =true
                if (this.checkGoodList.length == this.goodList.length) {
                    this.checkAll = true
                } else {
                    // 只要长度不相等，都是false
                    this.checkAll = false
                }
            },
            handleAdd(good) {
                good.count++
            },
            handleJian(good) {
                if (good.count > 1) {
                    good.count--
                } else {
                    alert('不能再少了，受不了了')
                }

            }
        }
    })
</script>
</html>