本文共 1706 字,大约阅读时间需要 5 分钟。
使用工具:HBuild X,真的是一款超实用的软件
附上下载地址: 新建项目进入主题
css文件:table{ border: 1px solid #e9e9e9; width: 500px; border-collapse: collapse; border-spacing: 0;}th,td{ padding: 8px,16px; border: 1px solid #e9e9e9; text-align: align;}th{ background-color: #f7f7f7; color: #0000ff; font-weight: 600;}
.js文件
const app = new Vue({ el:'#app', data:{ books:[ { id:1, name:'《算法导论》', date:'2020-4', price:85.00, count:1 }, { id:2, name:'《Linux编程技术》', date:'2018-2', price:59.00, count:1 }, { id:3, name:'《深入理解java虚拟机》', date:'2019-9', price:95.00, count:1 }, { id:4, name:'《编程大全》', date:'2015-9', price:89.00, count:1 } ] }, methods:{ increment(index){ this.books[index].count++; }, discrement(index){ this.books[index].count--; }, removeBooks(index){ /* 因为下标值比id刚好小1 */ this.books.splice(index,1); } }, computed:{ totalPrice(){ let sum = 0; for (var i = 0; i < this.books.length; i++) { sum = sum + this.books[i].count * this.books[i].price; } return sum; } }})
最终的html文件
书籍名称 出版日期 价格 购买数量 操作 { { i.id}} { { i.name}} { { i.date}} { { i.price}} { { i.count}} 总价格为:{ { totalPrice}}
订单为空
最终的页面
把这个写完,这个vue的基础语法就能过关了
另外:赠人玫瑰,手留余香
该小管理系统的出处来自:转载地址:http://fahnz.baihongyu.com/