结果如图：
代码html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" > <div v-if="books.length>0"> <table> <thead> <tr> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>数量</th> <th>购买数</th> <th>操作</th> <th>移除</th> </tr> </thead> <tbody> <tr v-for="(item,index) in books"> <th >{{item.id}}</th> <th >{{item.name}}</th> <th >{{item.data}}</th> <th >{{item.price|showY}}</th> <!-- 价格这里添加了过滤器--> <th ><button @click="insc(index)">+</button> {{item.count}} <button @click="dec(index)" v-bind:disabled="item.count<=1">-</button> </th> <th><button @click="removeit(index)">移除</button></th> </tr> </tbody> </table> <h3>总价格 :{{totalPrice}}</h3> </div> <div v-else> 购物车为空 </div> </div> </body> <!--再之前和之后引入有区别--> <script src="../JS/vue.js"></script> <script src="../JS/main.js"></script> </html>
main.js
const app=new Vue({ el:"#app", //挂载那个元素//注意这里有井号 初学者容易掉 data:{ books:[{ id :1, name:"算法", data:"2006-9", price: 85, count:1}, { id :2, name:"unix编程", data:"2006-9", price: 85, count:1}, { id :3, name:"java入土", data:"2006-9", price: 85, count:1}, ] }, methods:{ insc(index){ this.books[index].count++;//注意这里的写法 }, dec(index) { this.books[index].count--;//注意这里的写法 }, removeit(index) { this.books.splice(index,1)//删除自身 } }, filters:{//注意是filtes 夹着s showY(price) { return "Y" +price } },computed: { totalPrice() //直接调用不用加括号 { let totleprice=0; for (let i=0;i<this.books.length;i++) {totleprice+=this.books[i].price*this.books[i].count; } return totleprice } }, })