vue购物车基本使用

最新推荐文章于 2025-06-16 21:18:19 发布
柑子~
最新推荐文章于 2025-06-16 21:18:19 发布
阅读量1k
点赞数 2
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： vue 购物车基本使用
本文链接：https://blog.youkuaiyun.com/apppws/article/details/83903180
javascript 专栏收录该内容
3 篇文章
订阅专栏
vue购物车基本使用：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车模拟</title>
</head>

<body>
    <div id="app">
        <h2>商品列表</h2>
        <table border="1">
            <tr>
                <th>id</th>
                <th>图片</th>
                <th>商品名称</th>
                <th>价钱</th>
                <th>操作</th>
            </tr>
            <tr v-for="(g,k) in goods">
                <td>{{k+1}}</td>
                <td>
                    <img :src="g.img" width="100">
                </td>
                <td>{{g.goods_name}}</td>
                <td>{{g.price}}</td>
                <td>
                    <input @click="add(k)" type="button" value="添加购物车">
                </td>
            </tr>
        </table>

        <h2>已选商品</h2>
        <table border="1">
            <tr>
                <th>图片</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr v-for="(c,k) in carts">
                <td>
                    <img :src="c.img" width="100">
                </td>
                <td>{{c.goods_name}}</td>
                <td>{{c.price}}</td>
                <td>
                    <input @click="count_add(k)" type="button" value="+"> {{c.count}}
                    <input @click="count_jian(k)" type="button" value="-">
                </td>
                <td>{{c.price * c.count}}</td>
                <td>
                    <input type="button"   @click = "remove(k)" value="删除">
                </td>
            </tr>
            <tr v-if="!carts.length">
                <td colspan="5" class="text-center">您的购物车空空如也..</td>
            </tr>
            <tr>
                <td colspan="4">总价:{{ totalPrice }}</td>
                <td colspan="2">
                    <input type="button" @click = "removeAll"  value="清空购物车">
                </td>
            </tr>
        </table>
    </div>


</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            // 总价钱
            // totalPrice: 1000,
            goods: [
                {
                    id: 1,
                    goods_name: "漂亮的裙子",
                    price: 100,
                    img: "./image/06.jpg",
                },
                {
                    id: 2,
                    goods_name: "空调",
                    price: 100,
                    img: "./image/06.jpg",
                },
                {
                    id: 3,
                    goods_name: "iPhone X",
                    price: 8999,
                    img: "./image/06.jpg",
                },
            ],
            // Uncaught TypeError:cannot read property 'length' of null 错误解决方法:
            // JSON.parse(localStorage.getItem('carts')) 一开始是空的  判断如果一开始有就执行 没有就为[]
            carts: localStorage.getItem('carts') ? JSON.parse(localStorage.getItem('carts')) : []
            // carts:[]
        },
        methods: {
            
            // 给按钮添加
            add: function (k) {
                // 先循环购物列表看是否有这个id
                for (var i = 0; i < this.carts.length; i++) {
                    // 判断如果有这件商品的就+1  
                    if (this.carts[i].id == this.goods[k].id) {
                        this.carts[i].count++;
                        // 如果没有就返回
                        return;
                    }

                }

                // 把列表中数据添加到已选着的购物车中
                this.carts.push({
                    id: this.goods[k].id,
                    goods_name: this.goods[k].goods_name,
                    price: this.goods[k].price,
                    img: this.goods[k].img,
                    count: 1,
                })
                // 保存到浏览器中
                localStorage.setItem('carts', JSON.stringify(this.carts))
            },
            // 让数量+1 
            count_add: function (k) {
                this.carts[k].count++;
                // 保存到浏览器中
                localStorage.setItem('carts', JSON.stringify(this.carts))
            },
            // 让数量-1
            count_jian: function (k) {
                // 解决减负数的问题
                if (this.carts[k].count == 1) {
                    if (confirm("你确定要删除吗？")) {
                        this.carts.splice(k, 1);
                    }
                }
                else {
                    this.carts[k].count--;
                }
                localStorage.setItem('carts', JSON.stringify(this.carts))
            },
            // 删除一条 
            remove:function(k){
                // this.carts[k].count = 0;
                localStorage.removeItem('carts', JSON.stringify(this.carts.splice(k,1)));
                localStorage.getItem('carts')
            },
            // 删除所有
            removeAll:function(){
                localStorage.removeItem('carts');
                localStorage.setItem('carts', JSON.stringify(this.carts=[]));
            }
        },
        computed:{
            // 总价
            totalPrice (){
                let sum = 0
				// 循环计算总价
				for(let i=0;i<this.carts.length;i++){
					if( this.carts[i] )
					{
						sum += this.carts[i].price * this.carts[i].count
					}
				}
				// 返回（JS小数运算会出问题：toFixed)
				return sum.toFixed(2)
            }
        }
       
    });
</script>

</html>