VUE实现简易购物车
主要是对基础的指令的使用，直接上代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">table {width: 500px;text-align: center;border-collapse: collapse;}table,th,td {border: 3px double black;}input{width: 120px;}</style><script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
</head><body><div id="falsebody"><table id="tableBox" cellspacing="0" cellpadding="9"><tr><td>名称</td><td>价格</td><td>数量</td><td>操作</td></tr><tbody><tr v-for="(item,index) in goods" @click="changeColor(index)":style="{backgroundColor: k != index ? '' : '#0078D4'}"><td>{{item.name}}</td><td>￥{{item.price}}</td><td><button type="button" @click="redruce(index)">-</button>{{item.num}}<button type="button" @click="plus(index)">+</button></td><td><button type="button" @click="editBlock(item,index)">编辑</button><button type="button" @click="del(index)">删除</button></td></tr></tbody><tfoot><tr><td></td><td>总价:￥{{allPrice}}</td><td>总数量:{{allNum}}</td><td></td></tr></tfoot></table><button type="button" @click="addBlock()">添加商品</button><div v-show="addShow"><input v-model="name" type="text" name="" value="" placeholder="名称" /> <input v-model="price" type="number" name="" value="" placeholder="价格" /> <input v-model="num" type="number" name="" value="" placeholder="数量" /> <button type="button" @click="addSure()">确定</button> <button type="button" @click="addCancel()">取消</button></div><div v-show="editShow"><input v-model="editname" type="text" name="" /> <input v-model="editprice" type="number" name="" /> <input v-model="editnum" type="number" name="" /> <button type="button" @click="editSure()">确定</button> <button type="button" @click="editCancel()">取消</button></div></div><script>let { createApp, ref, reactive } = Vue;createApp({setup() {//假数据const goods = ref([{"name": "衣服","price": 39,"num": 1},{"name": "鞋子","price": 69,"num": 1}])//减少商品数量function redruce(i) {goods.value[i].num--;// 不能减到负数if (goods.value[i].num <= 0) {goods.value[i].num = 0;}calculation();}//增加商品数量function plus(i) {goods.value[i].num++;calculation();};// 声明一个变量计算总价let allPrice = ref(0);// 声明一个变量计算总数量let allNum = ref(0);calculation();//计算总价格和总数量function calculation() {allPrice.value = 0;allNum.value = 0;for (let i in goods.value) {allPrice.value += goods.value[i].num * goods.value[i].price;allNum.value += goods.value[i].num;};};// 默认隐藏添加输入框let addShow = ref(false);// v-model添加 获取输入框输入的新数据let name = ref('');let price = ref('');let num = ref('');//点击添加function addBlock() {name.value = '';price.value = '';num.value = '';addShow.value = true;};//点击确定添加function addSure() {// 判断不为空if (name.value != '' && price.value != '' && num.value != '') {// 添加的新数据let newData = {name: name.value,price: price.value,num: num.value};goods.value.push(newData);addShow.value = false;calculation();};};//点击取消添加function addCancel() {name.value = '';price.value = '';num.value = '';addShow.value = false;};// v-model编辑 更改元数据let editname = ref('');let editprice = ref('');let editnum = ref('');//编辑的默认数据let defaultData = reactive({editname: '',editprice: '',editnum: ''});//默认隐藏编辑输入框let editShow = ref(false);let index;// 接收点击编辑时传的下标//点击编辑按钮function editBlock(item, i) {Object.assign(defaultData, item);editname.value = item.name;editprice.value = item.price;editnum.value = item.num;index = i;editShow.value = true;};//点击确定编辑function editSure() {goods.value[index].name = editname.value;goods.value[index].price = editprice.value;goods.value[index].num = editnum.value;calculation();editShow.value = false;};//点击取消编辑function editCancel() {editShow.value = false;};//点击删除function del(i) {goods.value.splice(i, 1);editShow.value = false;calculation();};//点击商品操作时改变背景颜色let k = ref();//点击换色function changeColor(i) {k.value = i;};return {goods,allNum,allPrice,redruce,plus,name,num,price,addShow,addBlock,addSure,addCancel,editShow,defaultData,editname,editprice,editnum,editBlock,editSure,editCancel,del,k,changeColor}}}).mount('#falsebody');</script>
</body></html>