VUE实践：用vue实现简单的购物车

最新推荐文章于 2024-06-13 07:27:27 发布

BoomShaKa_S

最新推荐文章于 2024-06-13 07:27:27 发布

阅读量912

点赞数 2

分类专栏： VUE实践文章标签： vue计算属性购物车

本文链接：https://blog.csdn.net/weixin_41350225/article/details/88991628

版权

VUE实践专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先上效果图
购物车的页面，有点丑，大家将就看
在这里插入图片描述
勾选商品和修改商品的数量会显示相应的价格

全选和取消全选

删除商品

对商品的排序

对商品价格的过滤

好了，该上源码了

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
    table{
        border: 1px solid red;
    }
    td{
        border: 1px solid red;
        text-align: center;
    }
    </style>
</head>

<body>
    <!-- 视图 -->
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>商品状态</th>
                    <th>商品ID
                        <!-- 排序的方法，在下边隐藏的是通过方法来改变的，没有隐藏的使用计算属性来控制 -->
                        <button @click='sorting'>排序</button>
                    </th>
                    <th>商品名称</th>
                    <th>商品价格
                        <!-- 这里是筛选，是通过方法来实现的 -->
                        <button @click='filter'>过滤小于3000的</button>
                    </th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(list,index) in computedSorting">
                <!-- <tr v-for="(list,index) in  lists"> -->
                <!-- 上面隐藏的这条语句是通过方法来排序时的语句，这里是遍历的数据层中的原数组，计算属性则是遍历的他返回的数组 -->
                    <td>
                        <input type="checkbox" v-model="list.rel" />
                    </td>
                    <td>{{index+1}}</td>
                    <!-- index是下标 -->
                    <td>{{list.name}}</td>
                    <td>{{list.price}}</td>
                    <td>
                        <button @click='reduce(index)'>-</button>
                        {{list.count}}
                        <button @click='add(index)'>+</button>
                        <!-- 数量的加减 -->
                    </td>
                    <td>
                        <button @click='remove(index)'>移除</button>
                        <!-- 删除数据 -->
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="6" v-if="lists.length==0">购物车为空</td>
                    <!-- 当所有的商品都被移除后，显示这条语句 -->
                </tr>
                <tr>
                    <td v-if="lists.length>0">
                        全选：<input v-model="rels" type="checkbox" @change='allrels' />
                        <!-- 全选方法 -->
                    </td>
                    <td colspan="5" v-if="lists.length>0">总价为:{{total}}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- 数据模型 -->
    <script>
        var vueApp = new Vue({
            el: '#app',  //绑定的元素节点
            data: {  //实例数据
                lists: [        //原数组
                    { id: 1321, name: "小米max2", price: 1500, count: 1, rel: true },
                    { id: 2763, name: "联想低配电脑", price: 3000, count: 1, rel: false },
                    { id: 332, name: "外星人中端电脑", price: 26000, count: 1, rel: false },
                    { id: 4000, name: "道德经珍藏版", price: 500, count: 1, rel: false },
                ],
                rels: false,//全选按钮的初始状态
                sort: true,//排序时使用的标识 true为升序 false为降序
                flag:0,//通过计算属性来排序数组时用的标识 0为默认 1为升序 2为降序
            },
            methods: {
                //这里的this是vueApp这个对象
                add: function (index) { //添加数量的方法
                    this.lists[index].count++;
                },
                reduce: function (index) {  //减少数量的方法
                    if (this.lists[index].count > 1) this.lists[index].count--;
                },
                remove: function (index) {  //移除商品的方法
                    this.lists.splice(index, 1);
                },
                allrels: function () { //全选和取消全选的方法
                    if (this.rels) {
                        this.lists.forEach(function (ele) {
                            ele.rel = true;
                        })
                    } else {
                        this.lists.forEach(function (ele) {
                            ele.rel = false;
                        })
                    }
                },
                sorting: function () {  //排序的方法 隐藏的部分是通过方法来排序的 没有隐藏的是修改flag标识
                    // if (this.sort) {
                    //     this.sort = false;
                    //     this.lists.sort(function (a1, a2) {
                    //         return a1.id - a2.id;
                    //     })
                    // } else {
                    //     this.sort = true;
                    //     this.lists.sort(function (a1, a2) {
                    //         return a2.id - a1.id;
                    //     })
                    // }
                    if(this.flag ==0){
                        this.flag =1;
                    }else if(this.flag == 1){
                        this.flag =2;
                    }else{
                        this.flag =1;
                    }

                },
                filter:function(){  //对价格的筛选

                   this.lists =  this.lists.filter(function(ele){
                        console.log(ele);
                        return ele.price>=3000;
                    })
                }

            },
            computed: { //计算属性
                total: function () {    //总价
                    var money = 0;
                    this.lists.forEach(element => {
                        if (element.rel) money += element.price * element.count;
                    });
                    return money;

                },
                computedSorting:function(){ //排序
                    if(this.flag ==1){
                        this.lists.sort(function (a1, a2) {
                            return a1.id - a2.id;
                        });
                        return this.lists;
                    }else if(this.flag ==2){
                        this.lists.sort(function (a1, a2) {
                            return a2.id - a1.id;
                        })
                        return this.lists;
                    }else{
                        return this.lists;
                    }
                }
            }

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

这里有个小问题，对价格的筛选最好也用vue的计算属性来实现，因为filter这个方法会改变原数组，相当于你筛选完了以后，原数组中的数据也被删除了，但用计算属性就不会有这个问题，就拿来给大家练手吧

BoomShaKa_S

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
VUE实践：用vue实现简单的购物车

先上效果图购物车的页面，有点丑，大家将就看勾选商品和修改商品的数量会显示相应的价格全选和取消全选删除商品对商品的排序对商品价格的过滤好了，该上源码了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...
复制链接

扫一扫

专栏目录