1.html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue小案例</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="app"> <div v-if="this.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.data}}</td> <td>{{item.price | finalPrice}}</td> <td> <button @click="addCount(index)" :disabled="item.count<1">+</button> {{item.count}} <button @click="SubCount(index)" :disabled="item.count<=1">-</button> </td> <td> <button @click="DelItem">删除</button> </td> </tr> </tbody> </table> <h3>你一共消费了{{TotalPrice | finalPrice}}</h3> </div> <h3 v-else>你的购物车为空</h3> </div> <script src="../js/vue.js"></script> <script src="index.js"></script> </body> </html>
2.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: 700;
}
3.Vue.js代码
const app=new Vue({ el:"#app", data:{ books:[ { id:1, name:'计算机算法', data: '2002-2', price:29.00, count:1 }, { id:2, name:'科学算法', data: '2012-2', price:37.00, count:1 }, { id:3, name:'深爱与你', data: '2028-2', price:86.00, count:1 },{ id:4, name:'美女与野兽', data: '2066-2', price:28.00, count:1 } ] }, methods:{ addCount(index){ this.books[index].count++ }, SubCount(index){ this.books[index].count-- }, DelItem(index){ this.books.splice(index,1) } }, computed:{ TotalPrice(){ let resultPrice=0; for (let i=0;i<this.books.length;i++){ resultPrice+=this.books[i].price*this.books[i].count } return resultPrice; } }, filters:{ finalPrice(price){ return '￥'+price.toFixed(2) } } })
