京东购物车demo

这里写图片描述

HTML代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
    <!--bootstrap 栅格化布局 默认12列（有一些框架可能是24列）-->
    <!--常见的样式 基本样式+增强样式-->
    <!--default 灰色 success 绿色 danger 红色 warning 警告色 info 浅蓝色 primary 蓝色-->
    <div class="container">
        <!--每一行又会拥有12列-->
        <div class="row">

            <table class="table table-hover table-bordered">
                <tr>
                    <!--click点击时，checkbox的状态还没有改变，所以拿到的总是相反的 change可以保证只当值变化的时候再触发函数-->
                    <th>全选 <input type="checkbox" v-model="checkAll" @change="change"></th>
                    <td>商品</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(products,index) in products">
                    <td><input type="checkbox" v-model="products.isSelected"@change="checkOne"></td>
                    <!--:和v-bind等价 指令：动态绑定数据-->
                    <td><img :src="products.productCover" :title="products.productName">{{products.productInfo}}</td>
                    <td>
                        {{products.productPrice|fix()}}
                    </td>
                    <td>
                        <!--.number是让输入框的值变成数组类型-->
                        <!--.lazy当输入框失去焦点时更新-->
                        <input type="number" v-model.number="products.productCount" min="0">
                    </td>
                    <td>
                        <!--过滤器：原数据不变的情况，改变显示的效果 管道符|-->
                        {{products.productCount*products.productPrice |toFixed(2)}}</td>
                    <td><button class="btn btn-danger" @click="remove(products)">删除</button></td>
                </tr>
                <tr>
                    <!--{{sum()}} 数据一变化就会重新调用这个函数 算出最新的结果，不会缓存上一次的结果computed可以解决这个问题-->
                    <td colspan="6">
                        总价格:{{sum()|toFixed(2)}}
                    </td>
                </tr>
            </table>
        </div>
    </div>


</div>

<script src="node_modules/vue/dist/vue.js"></script>
<!--基于promise的-->
<script src="node_modules/axios/dist/axios.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        //专门用来发送ajax的方法
        created(){//在数据被初始化后会调用,this指向也是vm实例,钩子函数
          this.getData();
        },
        methods:{
            sum(){//求和函数

              return this.products.reduce((prev,next)=>{
                  if (!next.isSelected) return prev;//如果当前没被选中 就不加当前这一项
                  return prev+next.productPrice*next.productCount;
              },0)
            },
            checkOne(){
                //根据下面点击的结果控制上面全选的结果
                //alert(1);
                this.checkAll = this.products.every(item=>item.isSelected);
            },
            //根据当前自己的状态 设置 其他人的状态 实现全选和反选
            change(){
                this.products.forEach(item=>item.isSelected=this.checkAll);
            },
            getData(){//初始化方法
                //promise 解决回调问题的
                axios.get('./carts.json').then(res=>{//成功回调 success
                    console.log(res.data);
                    this.products = res.data;//获取数据 拿到的需要时res.data
                    this.checkOne();//数据获取完成后给checkAll赋值
                },err=>{//error
                    console.log(err);
                })
            },
            remove(p){//p代表的是当前点击的这一项
                //this.products=this.products.filter(item=>item!==p);
                this.products = this.products.filter(
                    function (item) {
                        return item!==p;
                    }
                );

            }
        },
        data:{
            products:[],
            checkAll:false
        },
        filters:{//可以有好多的自定义过滤器
            toFixed(input,param1){//这里的this是window
                return '￥'+input.toFixed(param1);//input代表了管道符前面的内容 param1代表的是toFixed 中传递的参数
            },
            fix(input){
                return '￥'+input;
            }
        }
    })
</script>
</body>
</html>

JSON字符串

[
  {
    "id": 1,
    "isSelected": true,
    "productCover": "https://img10.360buyimg.com/cms/s80x80_jfs/t11926/217/1309283752/228477/f2ea2a50/59ffd522N9a0b3428.jpg",
    "productName": "联想笔记本",
    "productInfo": "颜色:/xxxxx/功能:/学习",
    "productPrice": 699.12,
    "productCount": "1"
  },
  {
    "id": 1,
    "isSelected": true,
    "productCover": "https://img10.360buyimg.com/cms/s80x80_jfs/t11926/217/1309283752/228477/f2ea2a50/59ffd522N9a0b3428.jpg",
    "productName": "联想笔记本",
    "productInfo": "颜色:/xxxxx/功能:/学习",
    "productPrice": 699.12,
    "productCount": "1"
  }
]

猜你喜欢