購物車結算 案例
這是做出來的效果：
案例要求：
- 如果兩樣商品的金額（不含運費）合計超過了5000元，則可減免100元
- 如果兩樣商品的金額（不含運費）合計超過了8000元，則可減免200元
- 在如上五個輸入框中修改數值時，各項統計結果要實時更新
以下是我的代碼：
（寫的不好請見諒 ，，，）
<template>
<div>
<h2>購物車結算案例</h2>
<hr>
<div class="div">
<table>
<tr>
<td>手機:</td>
<td>價格 <input type="text" v-model.number="price1"></td>
<td>數量 <input type="text" v-model.number="num1"></td>
<td>小記 {{sum1}}元</td>
</tr>
<tr>
<td>電腦:</td>
<td>價格 <input type="text" v-model.number="price2"></td>
<td>數量 <input type="text" v-model.number="num2"></td>
<td>小記 {{sum2}}元</td>
</tr>
</table>
<div class="conter">
<div>運費: <input type="number" v-model.number="fare"></div>
<p>總計: {{sum1+sum2}}</p>
<p>優惠: {{youhui}}</p>
<p>應付: {{sum}}</p></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
price1: 7999,
price2: 5888,
num1: 2,
num2: 1,
fare: 10
}
},
computed: {
sum1 () {
return this.price1 * this.num1
},
sum2 () {
return this.price2 * this.num2
},
sum () {
const a = this.sum1 + this.sum2
if (a > 8000) {
return a + this.fare - 200
} else if (a > 5000) {
return a + this.fare - 100
} else {
return a + this.fare
}
},
youhui () {
const a = this.sum1 + this.sum2
if (a > 8000) {
return 200
} else if (a > 5000) {
return 100
} else {
return 0
}
}
}，
watch: {
num1: {
deep: true,
handler () {
if (this.num1 < 1) {
this.num1 = 1
}
}
},
num2: {
deep: true,
handler () {
if (this.num2 < 1) {
this.num2 = 1
}
}
},
fare: {
deep: true,
handler () {
if (this.fare < 10) {
this.fare = 10
}
}
}
}
}
</script>
<style scoped>
h2{
text-align: center;
}
input{
width: 70px;
}
.div{
width: 500px;
height: 400px;
margin: 50px auto;
border-radius: 5%;
line-height: 40px;
background-color: rgb(255, 255, 255);
box-shadow: 2px 3px 5px #888888;
}
td{
padding: 0 15.7px;
}
.conter{
padding: 10px;
}
</style>購物車選商品時是不允許數量少于1的，在每個價格欄增加watch監聽，一旦資料小于1則讓改資料等于1
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/304761.html
標籤：python
上一篇：基于SpringBoot開發的美食系統分享【十分肝貨】【建議收藏】
下一篇：2021-10-01