vue 基础 案例 ：书籍购物车

vue 案例 ：书籍购物车

一、HTML

       <div id="app">
          <div v-if="books.length>0">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <!-- <td>{{getFinallPrice(item.price)}}</td> -->
                        <td>{{item.price | showPrice}}</td>

                        <td>
                            <button @click="decrement(index)" v-bind:disabled="item.count <= 1 ">-</button>
                            {{item.count}}
                            <button @click="increment(index)">+</button>
                        </td>
                        <td><button @click="removeHandler(index)">移出</button></td>
                    </tr>
                </tbody>
            </table>
            <h2>总价格：{{totalPrice | showPrice}}</h2>
          </div>
          <h2 v-else>购物车为空</h2>
        </div>
        <script src="../js/vue.js"></script>

        <script src="./main.js"></script>
    </body>

二、css

table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  th, td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
  }
  
  th {
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
  }

三、JavaScript

const app = new Vue({
    el: "#app",
    data: {
        books:[
            {
                id: 1,
                name: '《算法导论》',
                date: '2006-9',
                price: 85.00,
                count: 1
              },
              {
                id: 2,
                name: '《UNIX编程艺术》',
                date: '2006-2',
                price: 59.00,
                count: 1
              },
              {
                id: 3,
                name: '《编程珠玑》',
                date: '2008-10',
                price: 39.00,
                count: 1
              },
              {
                id: 4,
                name: '《代码大全》',
                date: '2006-3',
                price: 128.00,
                count: 1
              },
        ],
    },
    methods:{
        getFinallPrice(price){
            return '￥' + price.toFixed(2)
        },
        increment(index){
           return this.books[index].count++
        },
        decrement(index){
            return this.books[index].count--
        },
        removeHandler(index){
           return this.books.splice(index,1)
        }
    },
    computed:{
        totalPrice(){
            //1.普通 for 循环
            // let totalPrice = 0;
            // for(let i=0;i<this.books.length;i++){
            //     totalPrice += this.books[i].price * this.books[i].count
            // }
            // return totalPrice

            // 2.for(let i in/of this.books) 拿到的是索引
            // let totalPrice = 0
            // for(let i in this.books){
            //     totalPrice += this.books[i].price * this.books[i].count
            // }
            // return totalPrice

            //3.for (let i of this.books)  拿到的是 book
            // let totalPrice = 0
            // for(let item of this.books){
            //     totalPrice += item.price * item.count
            // }
            // return totalPrice


            //reduce(高阶函数)
            return this.books.reduce(function(pre,book){
                return pre + book.price * book.count
            },0)
        }
    },
    filters:{
        showPrice(price){
            return '￥' + price.toFixed(2)
        }
    }
});

实现步骤：

• 1.data中定义books

• 2.app中 v-for 遍历出书的 信息

• 3.购买数量中 绑定 增加 increment(index)" 减少 decrement(index) 的事件

• 4.设置减少的边界 当总数 小于1 的时候 不能选中
  v-bind:disabled="item.count <= 1 "

• 5在methods中实现 增加 减少 的方法
  1.通过点击按钮传递的id 找到对应的count 让 它 ++ 或则 –
  2.return this.books[index].count++
  3.return this.books[index].count –

• 6.实现移除
  1.给移出按钮绑定事件 并传递索引
  2.在methods中实现移出方法（用splice（要删除的索引，个数））
  3.return this.books.splice(index,1)

• 7.实现价格 有两种方法
  1.计算属性
  2.在computed中 定义 totalPrice方法
  3.普通 for循环遍历数组 或则高阶语法 （reduce）
  4.reduce ： 参数 1 ：是一个函数 参数2 ：是一个0
  5.第一次执行的时候 pre 为 0（初始值）+ 传递过来第一本数的单价*数量
  6.第二次执行的时候 pre 为第一次执行的结果 + 传递过来的 第二本数的单价 * 数量 。。。。。

  return this.books.reduce(function(pre,book){
     return pre + book.price * book.count
 },0)

• 8.过滤价格
  1.传递来一个 price
  2.return ‘￥’ + price.toFixed(2)
  3.最后在app中用插值 使用
  4.书的价格 {{item.price | showPrice}}
  5.总价格 {{totalPrice | showPrice}}