Vue购物车案例

今天练习的购物车案例，界面及功能如下：

功能：全选；删除，计算价格及总价格，商品个别没有被选中，全选按钮取消

自己建的一个json文件

[
  {
    "isSelect": false,
    "imgUrl": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
    "title": "Nodejs权威指南",
    "price": 57.8,
    "number": 1
  },
  {
    "isSelect": false,
    "imgUrl": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
    "title": "Nodejs权威指南",
    "price": 57.8,
    "number": 2
  },
  {
    "isSelect": false,
    "imgUrl": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
    "title": "Nodejs权威指南",
    "price": 57.8,
    "number": 3
  },
  {
    "isSelect": false,
    "imgUrl": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
    "title": "Nodejs权威指南",
    "price": 57.8,
    "number": 4
  }
]

本案例用axios读取内容，用Bootstrap进行布局
用cnpm口令下载
cnpm install axios --save
cnpm install bootstrap --save
在页面引用

<div id="app">
        <div class="container">
            <table class="table table-bordered table-hover ">
                <tr>
                    <th>全选：<input type="checkbox" v-model="isAll" @change="selectAll"></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in list">
                    <td><input type="checkbox" v-model="item.isSelect" @change="selectone"></td>
                    <td>
                        <img :src="item.imgUrl" alt="">
                        <span>{{item.title}}</span>
                    </td>
                    <td><span>{{item.price}}</span></td>
                    <td><input type="number" v-model="item.number" min="1"></td>
                    <td><span>￥{{(item.number*item.price).toFixed(2)}}</span></td>
                    <td><button class="btn btn-danger" @click="deleteTodo(index)">删除</button></td>
                </tr>
                <tr>
                    <!-- 在{{}} 可以使用表达式-->
                    <td>总价:{{total()}}</td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            created() {
                //不需要调用，页面加载就执行
                axios.get("./book.json").then((data) => {
                    console.log(data);
                    this.list = data.data
                })
            },
            data: {
                list: [],
                isAll: false,
            },
            methods: {
                //删除按钮的功能
                deleteTodo(ind) {
                    // 使用filter进行删除操作，过滤掉不满足条件的数据
                    this.list = this.list.filter((item, index) => {
                        return index != ind;
                    })
                },
                selectone() {
                    //商品个别没有选中，全选按钮取消选中
                    this.isAll = this.list.every((item) => {
                        return item.isSelect == true;
                    })
                },
                selectAll() {
                    //全选按钮选中状态
                    console.log(this.isAll)
                    this.list.forEach((item) => {
                        item.isSelect = this.isAll;
                    })
                },
                total() {
                    //计算商品的总价
                  return  this.list.reduce((tot, item) => {
                        if (item.isSelect) {
                            tot += parseFloat((item.price * item.number))
                            return tot;
                        }else{
                            return tot;
                        }
                    },0)
                }
            }
        })
    </script>

从此案例中得到：
created() {}在这个函数里添加的方法不需要调用，可以立即执行
filter((item, index) => {
}) 这个方法为过滤，过滤掉不满足条件的数据
在此案例中：

 deleteTodo(ind) {
                    // 使用filter进行删除操作，过滤掉不满足条件的数据
                    this.list = this.list.filter((item, index) => {
                        return index != ind;
                    })
                },

遍历所有的list，点击的ind=list的index，过滤掉，返回不等于List的index，再加载

  selectone() {
                    //商品个别没有选中，全选按钮取消选中
                    this.isAll = this.list.every((item) => {
                        return item.isSelect == true;
                    })
                },

every是vue中的一个方法，每一个都满足条件时，执行的函数

   total() {
                    //计算商品的总价
                  return  this.list.reduce((tot, item) => {
                        if (item.isSelect) {
                            tot += parseFloat((item.price * item.number))
                            return tot;
                        }else{
                            return tot;
                        }
                    },0)
                }

reduce为累加器，两个参数，第一个参数是一个函数，第二个参数是初始值
好好理解这个方法！！