使用vue基础语法制作一个简单的购物车：
首先搭建HTml样式：
v-for：类似于js中的for循环，需要使用item in items 特殊语法
<div id="app"> <table border="1"> <thead> <tr style="text-align: center;"> <th>名称</th> <th>价格</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody> <!-- key:高效更新，唯一 ，index，id等等。--> <!-- --> <tr v-for="(item,index) in list " :key="item.id" :style="{backgroundColor:item.count >0 ?'#ffd96c':'' }"> <td>{{item.name}}</td> <td>￥{{item.price}}</td> <td><input type="button" value="-" @click="minus(index)" v-show="item.count!=0"><span>{{item.count}}</span><input type="button" value="+" @click="add(index)"></td> <td><input type="button" value="编辑" @click="kai(index)"><input type="button" value="删除" @click="del(index)"></td> </tr> <tr> <td></td> <td>总价:<span>{{allPrice()}}</span></td> <td>总数量：<span>{{allNum()}}</span></td> <td></td> </tr> </tbody> </table> <button @click="ope">添加商品</button> <div v-show="adds"> <button @click="jia">添加</button><button @click="clo">取消</button><input type="text" placeholder="名称" v-model="i_name"><input type="text" placeholder="价格" v-model="i_price" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> </div> <div v-show="change"> <button @click="upd(index)">保存</button><button @click="guan">取消</button><input type="text" placeholder="名称" v-model="names"><input type="text" placeholder="价格" v-model="prices" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> </div>
引入vue.js文件，使用vue ：
首先创建一个假数据：
return { list: [{ id:1, name: "商品1", price: 10, count: 0 }, { id:2, name: "商品2", price: 20, count: 0 }], names: "", prices: "", i_name: "", i_price: "", adds: false, change: false, };
接下来写入加，减，增，删：
methods: { // 加 add(index) { this.list[index].count++; }, // 减 minus(index) { this.list[index].count--; }, // 删 del(index) { this.list.splice(index, 1); }, // 增 ope() { this.adds = true; }, jia() { if (this.i_name != "" && this.i_price != "") { this.list.push({ name: this.i_name, price: this.i_price, count: 0, }), this.adds = true; this.i_name = ''; this.i_price = ''; } }, clo() { this.adds = false; }, // 改 upd(index) { if (this.names != "" && this.prices != "") { this.list[index].name = this.names; this.list[index].price = this.prices; this.prices = "", this.names = "", this.change = false; } }, kai(index) { this.change = true; this.index = index; this.names = this.list[index].name; this.prices = this.list[index].price; }, guan() { this.change = false }, allNum(){ let num=0; this.list.forEach(val=>{ num+= val.count; }) return num; }, allPrice(){ let num=0; this.list.forEach(val=>{ num+= val.count*val.price; }) return num; }, }
附上完整 ：
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script> <script> Vue.createApp({ data() { return { list: [{ id:1, name: "商品1", price: 10, count: 0 }, { id:2, name: "商品2", price: 20, count: 0 }], names: "", prices: "", i_name: "", i_price: "", adds: false, change: false, }; }, methods: { // 加 add(index) { this.list[index].count++; }, // 减 minus(index) { this.list[index].count--; }, // 删 del(index) { this.list.splice(index, 1); }, // 增 ope() { this.adds = true; }, jia() { if (this.i_name != "" && this.i_price != "") { this.list.push({ name: this.i_name, price: this.i_price, count: 0, }), this.adds = true; this.i_name = ''; this.i_price = ''; } }, clo() { this.adds = false; }, // 改 upd(index) { if (this.names != "" && this.prices != "") { this.list[index].name = this.names; this.list[index].price = this.prices; this.prices = "", this.names = "", this.change = false; } }, kai(index) { this.change = true; this.index = index; this.names = this.list[index].name; this.prices = this.list[index].price; }, guan() { this.change = false }, allNum(){ let num=0; this.list.forEach(val=>{ num+= val.count; }) return num; }, allPrice(){ let num=0; this.list.forEach(val=>{ num+= val.count*val.price; }) return num; }, } }).mount("#app") </script>
最终呈现效果：
