功能描述
- 修改商品数量，同时价格动，总价态变化。
- 点击删除按钮可以动态删除商品
完整代码如下
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="vue3.0.js"></script> //引入vue.js包 <style>body { width: 600px; } table { border: 1pxsolidblack; } table { width: 100%; } th { height: 50px; } th, td { border-bottom: 1pxsolid#ddd; text-align: center; } span { float: right; } [v-cloak] { display: none; } </style></head><body><divid="app"><table><tr><th>商品号</th><th>商品</th><th>单价</th><th>数量</th><th>金额</th><th>操作</th></tr><trv-for='(book,index) in books':key="book.id"><td>{{book.id}}</td><td>{{book.title}}</td><td>{{book.price}}</td><td><button:disabled="book.count===0"@click="book.count--">-</button> {{book.count}} <button@click="book.count++">+</button></td><td>{{itemprice(book.price,book.count)}}</td><td><button@click="deleteitem(index)">删除</button></td></tr></table><p>总价：￥{{totalprice}}</p></div><script>//vue3.0语法constvm=Vue.createApp({ data(){ return{ books:[{ id: 1, title: 'Java无难事', price: 188, count: 1 }, { id: 2, title: 'C++深入详解', price: 168, count: 1 }, { id: 3, title: 'Servlet/JSP深入详解', price: 139, count: 1 }] } }, methods:{ itemprice(price,count){ returnprice*count; }, deleteitem(index){ this.books.splice(index,1); } }, computed:{ totalprice(){ lettotal=0; for(letbookofthis.books) { total+=book.price*book.count; } returntotal; } } }).mount("#app"); </script></body></html>
要点注意 ❗
这里注意要用for...of循环
区别for...in和for...of的用法
for-in遍历的是key，只能获得对象的键名，不能获得键值(适合遍历对象)
for-of遍历的是value，允许遍历获得键值(适合遍历数组)
具体效果
https://ucc.alicdn.com/images/user-upload-01/5e94d5a4c4fe4cb688114c56d04576fd.gif
