时间戳

首页 > 解决方案 > 如何将我的代码从 jquery 修改为 js 以及做错了什么？

javascript - 如何将我的代码从 jquery 修改为 js 以及做错了什么？

问题描述

我正在尝试对图片中的屏幕进行编码。我的javascript很差，因此我从我阅读或看到其他人的地方获取一些信息。

我正在使用 vuejs。当我运行我的数字时，我希望它作为数字的补充而不是替换它。当我按 1323 时，我想看到 12.23。

以下是我目前使用的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"  />
<template>
  <div class="mt-1">
    <b-row>
      <div class="text-left">
        <b-btn @click="$router.push('/salesgrid')" variant="transparent"
          ><font-awesome-icon size="2x" :icon="['fas', 'arrow-left']"
        /></b-btn>
      </div>
    </b-row>
    <b-card no-body>
      <b-tabs card align="center">
        <b-tab title="Payment" active>
          <b-row>
            <b-col cols="6">
              <b-list-group horizontal="md" class="row rounded flex-fill">
                <b-list-group-item
                  button
                  class="col-5 rounded border mr-2 shadow"
                  variant="info"
                  cols="1"
                >
                  <div class="text-center"><b>SHOW TENDERS</b></div>
                </b-list-group-item>
              </b-list-group>
            </b-col>
            <b-col class="text-right">
              <b-list-group horizontal="md" class="row rounded flex-fill">
                <b-list-group-item
                  button
                  class="col-5 rounded border mr-2 shadow"
                  variant="info"
                  cols="1"
                >
                  <div class="text-center"><b>SPLIT BY COVERS</b></div>
                </b-list-group-item>
                <b-list-group-item
                  button
                  class="col-5 rounded border mr-2 shadow"
                  variant="info"
                  cols="1"
                >
                  <div class="text-center"><b>SPLIT BY ITEM</b></div>
                </b-list-group-item>
              </b-list-group>
            </b-col>
          </b-row>
          <b-row class="mt-4 mb-4">
            <b-col class="bg-light border-right shadow" cols="10" md="4">
              <div class="mt-2">AMOUNT DUE</div>
              <div><h3>0.00</h3></div>
              <div class="mt-3">BASKET DISCOUNT</div>
              <div><h4>0.00</h4></div>
              <div class="mt-3">CUSTOMER DISCOUNT</div>
              <div><h4>0.00</h4></div>
              <div class="mt-3">CUSTOMER POINT SPEND</div>
              <div><h4>0.00</h4></div>
            </b-col>
            <b-col>
              <b-row>
                <b-col
                  style="font-size: 2.25rem"
                  class="bg-light border shadow text-right ml-3 mb-3"
                  md="11"
                >
                  {{ numFormatted }}
                </b-col>
              </b-row>
              <b-row
                v-for="(row, n) in list"
                :key="`row${n}`"
                class="text-center center row container-fluid mb-2"
              >
                <b-list-group
                  horizontal="md"
                  class="row px-md-6 flex-fill ml-1"
                >
                  <b-list-group-item
                    v-for="(item, key) in row"
                    :key="`item${key}`"
                    button
                    class="col mr-1 ml-1 rounded border shadow"
                    value="{value}"
                  >
                    <template v-if="item.paynum">
                      <div class="text-center">
                        <h4 @click="formatNum(item)">
                          {{ item.paynum }}
                        </h4>
                      </div>
                    </template>
                    <span v-else> {{ item }} </span>
                  </b-list-group-item>
                </b-list-group>
              </b-row>
            </b-col>
          </b-row>
          <b-row>
            <b-col cols="8">
              <b-list-group horizontal="md" class="row rounded flex-fill">
                <b-list-group-item
                  button
                  class="col-5 rounded border mr-2 shadow"
                  variant="info"
                  cols="1"
                >
                  <div class="text-center"><b>POINTS [0/0.00]</b></div>
                </b-list-group-item>

                <b-list-group-item
                  button
                  class="col-3 rounded border mr-2 shadow"
                  variant="info"
                  cols="1"
                >
                  <div class="text-center"><b>CASH</b></div>
                </b-list-group-item>

                <b-list-group-item
                  button
                  class="col-3 rounded border mr-2 shadow"
                  variant="info"
                  cols="1"
                >
                  <div class="text-center"><b>CARD</b></div>
                </b-list-group-item>
              </b-list-group>
            </b-col>
            <b-col> </b-col>
          </b-row>
        </b-tab>
        <b-tab title="Discount">
          <b-card-text>Feature Not Yet Available</b-card-text>
        </b-tab>
      </b-tabs>
    </b-card>
  </div>
</template><script type="module">
export default {
  name: "SalesGridPay",
  methods: {
    formatNum(data) {
      let string = ``;
      if (data.type == "number") {
        string = `0.00${data.paynum}`;
      } else string = data.paynum;
      return (this.numFormatted = string);
    },
  },
  created() {},
  data: () => ({
    list: [
      [
        { paynum: "1", type: "number" },
        { paynum: "2", type: "number" },
        { paynum: "3", type: "number" },
        { paynum: "$5", type: "USD" },
      ],
      [
        { paynum: "4", type: "number" },
        { paynum: "5", type: "number" },
        { paynum: "6", type: "number" },
        { paynum: "$10", type: "USD" },
      ],
      [
        { paynum: "7", type: "number" },
        { paynum: "8", type: "number" },
        { paynum: "9", type: "number" },
        { paynum: "$20", type: "USD" },
      ],
      [
        { paynum: ".", type: "number" },
        { paynum: "0", type: "number" },
        { paynum: "X", inconz: "th" },
        { paynum: "$55", type: "USD" },
      ],
    ],
    numFormatted: 0.0,
  }),
};
</script>

标签： javascriptvue.jsbootstrap-vue

解决方案

问题在于formatNum()，：

if (data.type == "number") {
  string = `0.00${data.paynum}`;
}

//...
this.numFormatted = string

"0.00"它作为字符串值的前缀data.paynum，结果存储在string.

让我们来看看几个调用formatNum()：

  1. 按1按钮。
  2. -handler click( formatNum()) 接收{ paynum: "1", type: "number" }作为它的data参数。
  3. data.type是"number"，所以它"0.00"与data.paynum( "1") 连接，结果是"0.001"。
  4. 按2按钮。
  5. -handler click( formatNum()) 接收{ paynum: "2", type: "number" }作为它的data参数。
  6. data.type是"number"，所以它"0.00"与data.paynum( "2") 连接，结果是"0.002"。

暂时忽略前缀问题，请注意该函数如何将最后一个值替换为data.paynum. 它需要考虑到的当前值，this.numFormatted以便追加新条目。

这是解决此问题的一种方法：

  1. 仅从 中提取数字this.numFormatted，忽略所有非数字字符（例如，"$4.11"被解析为"411"）。我们将使用匹配非数字 ( )String.prototype.replace的正则表达式，并将它们替换为空字符串。/[\D]/g

  2. 附加data.paynum到该结果。如果data.paynum是“2”，将其附加到"411"将导致"4112".

  3. 将结果除以100得到货币金额。应用于上述结果将产生41.12. 用于Number.prototype.toFixed仅获得两位小数。

if (data.type === "number") {
  // If it starts with a '$' (i.e., user pressed a preset),
  // set the value to 0, so we can calculate a new number below...
  if (this.numFormatted[0] === "$") {
    this.numFormatted = '0';
  }

  let numRaw = this.numFormatted.replace(/[\D]/g, ""); // 1️⃣
  numRaw += data.paynum; // 2️⃣
  string = (numRaw / 100).toFixed(2); // 3️⃣
}

//...
this.numFormatted = string;

演示

推荐阅读