html代码 ` <lang=“en”>
Document} th{ background-color: #f7f7f7; color:#5c6b77 ; font-weight: 600; }
<div id="app" > <div v-if="books.length"> <table> 书籍名称 出版日期 价格 购买数量 操作 {{items.id}} {{items.name}} {{items.date}} <td>{{items.price|showPrice}}</td> <td> <button @click="addbtn(index)">+</button> {{items.count}} <button @click="subbtn(index)" v-bind:disabled="items.count<=1">-</button> </td> <td>{{items.perform}} <button @click=" removeHandler(index)">移除</button> </td> </tr> </table> <h4 >总价格：{{totalpay|showPrice}}</h4> </div> <h2 v-else>购物车为空</h2> </div> new Vue({ el:"#app", data:{ books:[ {id:1,name:"算法导论",date:"2020-01-10",price:98.00,count:1,perform:""}, {id:2,name:"计算机组成原理",date:"2019-03-10",price:89.00,count:1,perform:""}, {id:3,name:"软件工程",date:"2018-01-10",price:72.00,count:1,perform:""}, {id:4,name:"操作系统原理",date:"2017-01-10",price:88.00,count:1,perform:""} ], }, methods:{ // getfullprice(price){ // return '￥'+ price.toFixed(2); // }, addbtn(index){ this.books[index].count++ }, subbtn(index){ this.books[index].count-- }, removeHandler(index){ this.books.splice(index,1); } }, filters:{ showPrice(price){ return '￥'+ price.toFixed(2); } }, computed:{ totalpay(){ let total=0; // for(book of this.books){ // total+=book.price*book.count; // } // return total; // for(let i=0;i<this.books.length;i++){ // total+=this.books[i].price*this.books[i].count; // } for(i in this.books){ total+=this.books[i].price*this.books[i].count; } return total; } } })知识点：1.v-for 循环遍历生成行列元素 2.在价格和总价里关于filters的使用 3.computed 计算属性 4.循环遍历（for in ）/（for of） 5 点击事件，比如增删数量需要传入index 6 v-if v-else 的使用（当点击删除，界面没有任何元素） 应显示购物车为空
