前言
首先制作出购物车的页面和实现简易的功能
<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>
设置奇偶行的背景颜色
- 使用vue的类绑定方法来实现
- 类绑定:控制选择的类是否执行
完整代码如下
<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><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; } .even { background: #cdcdcd; } </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":class="{even:book.id%2!=0}"><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>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>
实现效果
book.id%2==0 偶数行
book.id%2!=0 奇数行
奇数行
偶数行
