<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础购物车</title>
<style>
table{
width: 300px;
border-spacing: 0;
border-top: 1px solid gray;
border-left: 1px solid gray;
}
th{
font-weight: bold;
}
td,th{
border-right: 1px solid gray;
border-bottom: 1px solid gray;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in count" :style="{backgroundColor: item.num != 0? color:''}" >
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button @click="minus(index)" v-if="item.num>0">-</button>{{item.num}}<button @click="add(index)">+</button></td>
<td><button @click="edit(index)">编辑</button><button @click="del(index)">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>总价:{{Allprice}}</td>
<td>总数量:{{Allnum}}</td>
<td></td>
</tr>
</tfoot>
</table>
<div><button @click="addShop">添加商品</button></div>
<div v-show="status == 1">
<button @click="save">保存</button>
<button @click="cancel">取消</button>
<input type="text" v-model="Shopname" placeholder="请输入商品名称">
<input type="number" v-model="Shopnum" placeholder="请输入商品数量">
<input type="number" v-model="Shopprice" placeholder="请输入商品价格">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
<script>
let { createApp, reactive ,ref } = Vue;
createApp({
setup(){
const status = ref(0)
const jian = ref(0)
const Shopname = ref()
const Shopnum = ref()
const Shopprice = ref()
const Addnum = ref()
let hui = 0
let indexs
const obj = reactive(
{
name:'',
num:0,
price:''
}
)
const count = reactive(
[{
name:'商品一',
num:0,
price:100
},{
name:'商品二',
num:0,
price:100
},{
name:'商品三',
num:0,
price:100
}
]);
// 添加商品
let addShop = ()=>{
hui = 1
if(status.value == 1){
status.value = 0
}else{
status.value = 1
}
Shopname.value =''
Shopprice.value=''
Shopnum.value=''
}
// 编辑
let edit = (index)=>{
hui = 2
indexs = index
if(status.value == 1){
status.value = 0
}else{
status.value = 1
}
Shopname.value = count[index].name
Shopprice.value = count[index].price
Shopnum.value = count[index].num
}
// 编辑保存
let save = ()=>{
if(status.value == 1){
status.value = 0
}else{
status.value = 1
}
let obj = {
name:Shopname.value,
num:Shopnum.value,
price:Shopprice.value
}
if(hui == 1){
count.push(obj)
}else if(hui == 2){
count.splice(indexs,1,obj)
}
Aprice()
}
// 取消
let cancel = ()=>{
if(status.value == 1){
status.value = 0
}else{
status.value = 1
}
}
// 总价
let Allprice = ref(0)
let Allnum = ref(0)
function Aprice (){
Allprice.value = 0
Allnum.value = 0
for (let i = 0; i < count.length; i++) {
Allprice.value += count[i].price*count[i].num;
}
for (let i = 0; i < count.length; i++) {
Allnum.value += count[i].num
}
console.log(Allprice);
}
// 加减按钮
let add = (index)=>{
count[index].num++;
Aprice()
}
let minus = (index)=>{
count[index].num--;
Aprice()
}
// 删除
let del = (index)=>{
count.splice(index,1)
}
console.log(count);
return{
count,
addShop,
edit,
Shopname,
Shopnum,
Shopprice,
save,
cancel,
add,
minus,
del,
Aprice,
jian,
status,
Allprice,
Allnum,
color:'red',
obj
};
}
}).mount('#app');
</script>
</body>
</html>直接上代码，简单好懂?