当前位置:首页 » 《随便一记》 » 正文

vue小练习 (一)_JINGinC的博客

19 人参与  2022年02月18日 10:35  分类 : 《随便一记》  评论

点击全文阅读


购物车结算 案例

这是做出来的效果:

 案例要求:

  1. 如果两样商品的金额(不含运费)合计超过了5000元,则可减免100元
  2. 如果两样商品的金额(不含运费)合计超过了8000元,则可减免200元
  3. 在如上五个输入框中修改数值时,各项统计结果要实时更新

以下是我的代码:

(写的不好请见谅 。。。)

<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


点击全文阅读


本文链接:http://zhangshiyu.com/post/34909.html

购物车  运费  数量  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 穿越七零:大佬,你的孩子重生了后续+番外_颜希姜建军全文阅读_小说后续在线阅读_无删减免费完结_
  • 我换战队后,嫌我是草包大小姐的搭档悔疯了小众冷门_苏媛林夕林小姐完整文本_小说后续在线阅读_无删减免费完结_
  • 我抛弃赘婿去冲喜,黑道大佬却发疯了节选(许棠傅明礼)_我抛弃赘婿去冲喜,黑道大佬却发疯了节选许棠傅明礼
  • (野渡无人春迟归)野渡无人春迟归小说(顾清许岁宁)整书在线无广告高口碑小说
  • 竹断相思情不知彩蛋(林逸舟陆清晚)全书在线下载阅读完美终章小说大结局
  • 全文我抛弃赘婿去冲喜,黑道大佬却发疯了结局+番外+续集(许棠傅明礼)列表_全文我抛弃赘婿去冲喜,黑道大佬却发疯了结局+番外+续集
  • 放弃白眼狼父子后,我暴富了阅读_霍元峰戚茗瑶霍砚白独家番外_小说后续在线阅读_无删减免费完结_
  • 重回八零,改嫁纨绔子弟后前夫悔疯了免费品鉴_小说后续在线阅读_无删减免费完结_
  • 南枝意周随小说番外+结局(被迫冥婚,糙汉刑警撬开棺材救我)小说在线阅读
  • (头条)那夜后,疯批大佬跪哄娇软小可怜小说(厉璟渊沈听榆)整本免费版阅读无广告(那夜后,疯批大佬跪哄娇软小可怜)
  • 睁眼大婚日,我踹了渣夫抱紧金大腿(云筝厉无恙)_睁眼大婚日,我踹了渣夫抱紧金大腿云筝厉无恙
  • 师妹为了野男人要杀我的鸟惊天黑幕_慕容苏玉霜玉霜内容精选_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1