Vue 黄金换算-vue案例-前端日记簿

首页 vue案例正文

Vue 黄金换算

2023-07-27 91

黄金换算：

效果图：

这次是对本地的数据进行计算所以用到了计算属性

首先在数据中心定义四个变量

   data() {
      return {
        num1: 1, //成本价
        num2: 1, //卖出单价
        rate: 0.3, //手续费率
        quantity: 0,//购买数量
      };

然后使用v-model 数据对视图层绑定

在计算中心写五个方法分别为

将其最后结果用插值表达式写在视图层

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>黄金换算</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        font-weight: 400;
        font-size: 15px;
      }
      .tap {
        margin: 20px;
      }
      .tap input {
        width: 103px;
        height: 30px;
        text-align: center;
        font-size: 16px;
        margin-left: 10px;
      }
      .tap span {
        color: red;
        margin-left: 5px;
      }
      .but button {
        display: block;
        width: 660px;
        height: 45px;
        margin: auto;
      }
      .bot {
        border-bottom: 1px solid rgb(205, 49, 49);
        margin: 30px 50px;
      }
      .result {
        margin: 20px;
      }
      .result div {
        margin: 10px;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="tap">
        <label for="">买入单价 :</label>
        <input type="number" name="买入单价" v-model.laze="num1" />
        <span>元/克</span>
      </div>
      <div class="tap">
        <label for="">卖出单价 :</label>
        <input type="number" name="卖出单价" v-model.laze="num2" />
        <span>元/克</span>
      </div>
      <div class="tap">
        <label for="">手续费率 :</label>
        <input type="number" name="手续费率" v-model.laze="rate" />
        <span>% (默认手续费为: 3%)</span>
      </div>
      <div class="tap">
        <label for="">购买数量 :</label>
        <input type="number" name="购买数量" v-model.laze="quantity" />
        <span>克</span>
      </div>
      <div class="but"><button>计算买入情况</button></div>
      <div class="bot"></div>
      <div class="result">
        <div>成本价 : {{num3}}</div>
        <div>手续费 :{{rates}}</div>
        <div>卖出价 : {{price}}</div>
        <div>赎回获得 : {{income}}</div>
        <div>净收入 : {{capital}}</div>
      </div>
    </div>
  </body>
</html>
<script src="../index.vue/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data() {
      return {
        num1: 1, //成本价
        num2: 1, //卖出单价
        rate: 0.3, //手续费率
        quantity: 0,//购买数量
      };
    },
    computed: {
      // 成本价
      num3() {
        return this.num1 * this.quantity;
      },
      // 卖出价
      price() {
        return this.num2 * this.quantity;
      },
      // 赎回获得
      income() {
        return this.price - this.rates;
      },
      // 手续费
      rates() {
        return this.num2 * this.quantity * this.rate * 0.01;
      },
      // 净收入
      capital() {
        return this.income - this.num3;
      },
    },
  });
</script>

标签：
vue 黄金计算器

发表评论：取消回复

原文链接：http://1.15.94.33/?id=27

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。