VUE3学习,购物车结算练习
程序员文章站
2022-03-13 15:36:42
...
购物车效果如下
<template>
<div>
<table>
<caption>购物车</caption>
<tr>
<th>全选 <input type="checkbox" @change="checkAll()" v-model="myChecked"></th>
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>购物数量</th>
<th>操作</th>
</tr>
<tr v-for="(value,key) in goods" key="key">
<td style="text-align: center"><input type="checkbox" v-model="value.checkbox" @change="check()"></td>
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<td>¥:{{value.price}}</td>
<td class="d-flex just-btw al-cent">
<!-- <div class="div-fang div-jian" @click="value.count--" :disabled="value.count<=1">-</div>-->
<button class="div-fang div-jian" @click="value.count--" :disabled="value.count<=0">-</button>
<input type="text" size="1" class="border-none out-line" style="width: 18px" :value="value.count" :v-model="value.count">
<!-- <div class="div-fang div-add" @click="value.count++">+</div>-->
<button class="div-fang div-add" @click="value.count++">+</button>
</td>
<td style="text-align: center"><a href="" @click.prevent="del(key)">删除</a> </td>
</tr>
<tr>
<td colspan="3" style="text-align: right">合计:</td>
<td colspan="3">{{totalPrice}}</td>
</tr>
</table>
</div>
<div style="margin-top: 20px ;border:1px solid #dbdbdb;width: 300px;height: 200px">
<p style="font-size: 18px;text-align: center;font-weight: bold">添加商品</p>
<span>商品名称:</span><input type="text" v-model="goodsName"><br>
<span>商品价格:</span><input type="text" v-model="goodsPrice"><br>
<span>库存数量:</span><input type="text"><br>
<button style="margin: 20px;border: 1px solid #666" @click="addGoods()" >添加</button>
</div>
</template>
<script>
export default {
name:"App",
data(){
return{
goods:[
{id:1, checkbox:false, name:'《细说PHP》', price:10, count:0},
{id:2, checkbox:false, name:'《细说网页制作》', price:10, count:0},
{id:3, checkbox:false, name:'《细说JavaScript语言》', price:10, count:0},
{id:4, checkbox:false, name:'《细说DOM和BOM》', price:10, count:0},
{id:5, checkbox:false, name:'《细说Ajax与jQuery》', price:10, count:0},
{id:6, checkbox:false, name:'《细说HTML5高级API》', price:10, count:0}
],
myChecked:false,
goodsName:"",
goodsPrice:0
}
},
computed:{
totalPrice:{
get(){
let sum=0;
for (let i=0;i<this.goods.length;i++){
if (this.goods[i].checkbox==true){
sum +=this.goods[i].price*this.goods[i].count;
}
}
return sum
}
}
},
methods:{
check(){
// for (let i=0;i<this.goods.length;i++){
// if (this.goods[i].checkbox==true){
// this.sum=this.goods.reduce((s,n)=>s+n)
// return this.sum
// }
// }
},
checkAll(){
for (let i=0;i<this.goods.length;i++){
this.goods[i].checkbox=this.myChecked
}
}
,
minus(){
},
addGoods(){
this.goods.push({id:this.goods.length+1,name: this.goodsName,price:this.goodsPrice,checkbox: false,count: 0})
},
del(key){
this.goods.splice(key,1)
}
}
}
</script>
<style scoped>
*{
margin: 0px;
padding: 0px;
}
table,th,td,tr{
border-collapse: collapse;
border: 1px solid #333;
}
tr{
height: 25px;
}
td,th{
width: 200px;
height: 22px;
}
tr>td:first-child,tr>th:first-child{
width: 60px;
}
tr>td:nth-child(2),tr>th:nth-child(2){
width: 80px;
text-align: center;
}
tr>td:nth-child(4),tr>th:nth-child(4){
width: 120px;
}
tr>td:nth-child(5),tr>th:nth-child(5){
width: 100px;
text-align: center;
}
tr>td:last-child,tr>th:last-child{
width: 80px;
}
.d-flex{
display: flex;
position: relative;
}
.just-btw{
justify-content: space-around;
}
.al-cent{
align-items: center;
}
.div-fang{
border: 1px solid #666;
width: 18px;
height: 18px;
position: absolute;
cursor: pointer;
text-align: center;
}
.div-jian{
left: 18px;
}
.div-add{
right: 18px;
}
.border-none{
border: none;
/*border-bottom: 1px solid #333;*/
}
.out-line{
outline: none;
}
.pad-l-r-10{
padding-left: 18px;
padding-right: 18px;
}
</style>
上一篇: 数组方法和对象模拟数组的方法