VUE3.0

简易购物满减活动案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超市满减活动案例</title>
</head>
<body>
<div id="app">
  <div><h2>香蕉10元/斤，折扣7折,本店参与满100元减10元活动</h2></div>
  <div>
    请输入你要购买的斤数：<input v-model.lazy="infoNum"><br>
  </div>
  <div>
    <h3>结账单：总价{{totalPrice}}￥元 折后价{{discountPrice}}元 省了{{saveMoney}}元</h3>
  </div>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
<script>
    var app=Vue.createApp({
        data(){
            return {
              infoNum:0,
            }
        },
      //计算属性
      computed: {
        //总价
        totalPrice() {
          return this.infoNum * 10;
        },
        //折后价
        discountPrice() {
          if (this.totalPrice >= 100) {
            return this.totalPrice * 0.7 - 10;
          } else {
            return this.totalPrice * 0.7;
          }
        },
        //节省的钱
        saveMoney() {
          if (this.discountPrice >= 100) {
            return 10 + this.totalPrice - this.discountPrice;
          } else {
            return this.totalPrice - this.discountPrice;
          }
        },
        methods: {}
      }
    }).mount("#app");
</script>
</body>
</html>

演示