<template> <div class="hello"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(book,index) in books" :key="index.id"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.date}}</td> <td>{{book.price | fla}}</td> <td> <button @click="jian(index)" v-bind:disabled="book.count <= 1">-</button> {{book.count}} <button @click="jia(index)">+</button> </td> <td> <button @click="shan(index)">移除</button> </td> </tr> </tbody> </table> <h2>总价格：{{num |fla}}</h2> </div> <h2 v-else>购物车为空</h2> </div></template><script>export default { name: "HelloWorld", data() { return { disabled: false, books: [ { id: 1, name: "算法导论", date: "2006-9", price: 85.0, count: 1 }, { id: 2, name: "UNIX编程艺术", date: "2006-2", price: 59.0, count: 1 }, { id: 3, name: "编程珠玑", date: "2008-12", price: 39.0, count: 1 }, { id: 4, name: "代码大全", date: "2006-3", price: 128, count: 1 } ] }; }, methods: { jian(index) { this.books[index].count--; }, jia(index) { this.books[index].count++; console.log(this.books); }, shan(index) { this.books.splice(index, 1); } }, computed: { num() {
//使用普通for循环进行相加总价格 // let num = 0; // for (let i of this.books) { // num += i.price * i.count; // } // return num;
// 使用 高阶函数来进行总价格相加 return this.books.reduce(function(a,books){ return a + books.price * books.count },0) } }, filters: { fla(a) { return "￥" + a.toFixed(2); } }, created(){ // 高阶函数的使用 let arr = [11,22,33,44,55,66,77,88,99]; let arr1 = arr.filter(function(n){ // filter 对比出 小于60的值 return n < 60 }).map(function(n){ // 把对比出的值进行 乘以 2 return n * 2 }).reduce(function(a,n){ // 把乘以 2 的值进行相加 return a + n },0 ) console.log(arr1); }};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>table { border: 1px solid black; border-collapse: collapse; border-spacing: 0;}th,td { padding: 8px 16px; border: 1px solid black; text-align: center;}th { background-color:
