1 html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>购物车</title> <script src="vue.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body > <div id="app"> <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="(item,index) in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price | getFinalPriceF}}</td> <td> <button @click=‘decrement(index)‘ v-bind:disabled=" item.count > 1 ? false :true">-</button> {{item.count}} <button @click=‘increment(index)‘>+</button> </td> <td> <button @click="removeHandle(index)">移除</button> </td> </tr> </tbody> </table> <h1>总价格：{{totalPrice |getFinalPriceF}}</h1> </div> <h2 v-else>购物车为空</h2> </div> </body> <!--js要加载在最后面！！--> <script src="mian.js" type="text/javascript"> </script> </html>
2 main.js
const app=new Vue({ el:"#app", data:{ books:[ { id:1, name:‘《算法导论》‘, date:‘2010-8‘, price:85.00, count:1 }, { id:2, name:‘《UNIX编程艺术》‘, date:‘2010-9‘, price:75.00, count:1 }, { id:3, name:‘《编程珠玑》‘, date:‘2000-8‘, price:51.00, count:1 }, { id:4, name:‘《代码大全》‘, date:‘2008-8‘, price:95.00, count:1 } ], }, computed:{ totalPrice(){ let totalPrice=0 for(let i=0;i<this.books.length;i++){ totalPrice += this.books[i].price * this.books[i].count } return totalPrice } }, methods:{ getFinalPrice(price){ return ‘￥‘+ price.toFixed(2) }, decrement(index){ if(this.books[index].count>=1){ this.books[index].count-- } }, increment(index){ this.books[index].count++ }, removeHandle(index){ this.books.splice(index,1) } }, filters:{ //过滤器 getFinalPriceF(price){ return ‘￥‘+ price.toFixed(2) } } })
3 style.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; }
filters:{ //过滤器
getFinalPriceF(price){
return ‘￥‘+ price.toFixed(2)
}
}
使用方法
<h1>总价格：{{totalPrice |getFinalPriceF}}</h1>
v-bind:disabled=" item.count > 1 ? false :true"
当数量小于等于1时 按钮不可用
原文：https://www.cnblogs.com/polax/p/12885490.html