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

【问题标题】：How to modify my codes from jquery to js plus what am doing wrong?如何将我的代码从 jquery 修改为 js 以及做错了什么？
【发布时间】：2021-06-13 19:28:34
【问题描述】：

我正在尝试对图片中的屏幕进行编码。我的 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>

【问题讨论】：

您的脚本需要是 type = module 才能在 sn-p 中不给出错误 - 您还需要包含 fontawesome。在我们收到minimal reproducible example 之前似乎还有更多问题
还有你的var vm = new Vue({ el:'#app', template: data.template, data: data.content });在哪里
@mplungjan 我对编码很陌生。我不明白你说我应该阅读的文件。 Think stock 需要修改代码功能，使其对像我这样的新手有点用户友好。

标签： javascript vue.js bootstrap-vue

【解决方案1】：

问题出在formatNum()，：

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

//...
this.numFormatted = string

将"0.00"前缀到data.paynum的字符串值，结果存储在string中。

让我们来看看formatNum()的几个电话：

按1按钮。
click-handler (formatNum()) 接收 { paynum: "1", type: "number" } 作为其 data 参数。
data.type 是 "number"，因此它将 "0.00" 与 data.paynum ("1") 连接起来，从而得到 "0.001"。
按2按钮。
click-handler (formatNum()) 接收 { paynum: "2", type: "number" } 作为其 data 参数。
data.type 是 "number"，因此它将 "0.00" 与 data.paynum ("2") 连接起来，从而得到 "0.002"。

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

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

仅从 this.numFormatted 中提取数字，忽略所有非数字字符（例如，"$4.11" 被解析为 "411"）。我们将String.prototype.replace 与regular expression that matches non-digits (/[\D]/g) 一起使用，并将它们替换为空字符串。
将data.paynum 附加到该结果。如果data.paynum 为“2”，则将其附加到"411" 将导致"4112"。
将结果除以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;

demo

【讨论】：