功能介绍：
1.点击加减按钮实现每个商品数量的加减
2.点击编辑回显并且可以修改保存
3.点击删除删除该列表
4.点击添加商品
5.更多细节可以亲手操作领悟
html：
<div id="app" v-cloak> <table> <thead> <tr> <td>名称</td> <td>价格</td> <td>数量</td> <td>操作</td> </tr> </thead> <tbody> <tr v-bind:style="item.num > 0 ? 'background:#ffff00;' : '' " v-for="(item,index) in arr" :key="item.index"> <th>{{item.name}}</th> <th>￥{{item.pic}}</th> <th> <button @click="jian(item)" v-if="item.num > 0">-</button> {{item.num}} <button @click="jia(item)">+</button> </th> <th> <button @click="edit(item)">编辑</button> <button @click="del(index,item)">删除</button> </th> </tr> <tr> <th></th> <th>总价:￥{{zongjia}}</th> <th>总数量:{{zongshu}}</th> <th></th> </tr> </tbody> </table> <button @click="on">添加商品</button> <div v-if="!status"> <button @click="baocun">保存</button><button @click="quxiao">取消</button><input placeholder="请输入商品名称" v-model="name" type="text"><input placeholder="请输入商品价格" v-model="price" type="number"> </div> <div v-show="!zhuangtai"> <button @click="baocun1(index,item)">保存</button><button @click="quxiao">取消</button><input placeholder="请输入商品名称" v-model="product_name" type="text"><input placeholder="请输入商品价格" v-model="commodity_price" type="number"> </div> </div>
css：
<style> table { text-align: center; border: 1px solid #847979; } tr { border: 1px solid #847979; } th { width: 150px; height: 50px; border: 1px solid #847979; } td { width: 150px; height: 50px; border: 1px solid #847979; } [v-cloak] { display: none; } </style>
js：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> let index = 0; const { createApp } = Vue; createApp({ data() { return { arr: [ { index: index++, name: '商品一', pic: 10, num: 0, style: 'red;' }, { index: index++, name: '商品二', pic: 100, num: 0, style: 'blue;' }, { index: index++, name: '商品三', pic: 150, num: 0, style: 'red;' } ], //总数 zongshu: 0, //总价 zongjia: 0, //状态 status: true, //状态 zhuangtai: true, //添加的单价 price: 0, //编辑的名称 product_name: '', //编辑的单价 commodity_price: 0, // name: '暂无名称', //下标 number: 0 }; }, methods: { //加按钮 jia(item) { //对应的数量++ item.num++; //总数++ this.zongshu++; //总价加等于单价 this.zongjia += item.pic; }, //减按钮 jian(item) { //对应的数量-- item.num--; //总数-- this.zongshu--; //总价减等于单价 this.zongjia -= item.pic; }, //添加商品显示输入框 on() { //判断的状态 this.zhuangtai = true; this.status = false; }, //点击取消隐藏 quxiao() { //判断的状态 this.status = true; this.zhuangtai = true; this.product_name = ''; this.commodity_price = ''; }, //保存 baocun() { //新增 加一个对象 this.arr.push({ index: index++, name: this.name, pic: this.price, num: 0, style: 'red;' }) }, //删除 del(i, item) { //删除指定下标的数据 this.arr.splice(i, 1); //总数减等于对应的数量 this.zongshu -= parseInt(item.num); //总价减等于对应的数量乘单价 this.zongjia -= item.num * parseInt(item.pic); }, //编辑 edit(item) { //判断的状态 this.status = true; this.zhuangtai = false; // this.product_name = ''; // this.commodity_price = ''; //让名称输入框的值等于对应下标的名称 this.product_name = item.name; //让单价输入框的值等于对应下标的单价 this.commodity_price = item.pic; //下标 this.number = item.index; }, //编辑保存 baocun1(i, item) { //给总价初始化 this.zongjia = 0; //修改对应下标的名称 this.arr[this.number].name = this.product_name; //修改对应下标的单价 this.arr[this.number].pic = this.commodity_price; //从新给总价计算 for (let s in this.arr) { this.zongjia += parseInt(this.arr[s].pic) * parseInt(this.arr[s].num); } } } }).mount('#app') </script>
