Vue 3 中每个标签的数学运算？

Question

我的模式中有 3 个单独的标签。我想在每个标签中进行不同的数学运算。每个标签中有 3 个输入。其中 2 个用于输入数字，另一个用于给出结果。例如，我在第一个标签中有 x + y = z 问题，我必须找到 z 值。在第二个标签中，让公式 x+y=z 再次成为问题，我必须输入 x 和 z 值并找到 y value.In 第三个标签我必须在其中输入 y 和 z 值并发现 x value.My 问题是，我无法在单个计算的 3 个单独标签中写入我需要查找的值？

输出：

模板：

           <form>
                <div class="row">
                  <div class="mb-3 col-sm-4 col-xs-12">
                    <h6 class="text-dark" for="purchasePrice">x</h6>
                    <input
                      type="text"
                      class="form-control"
                      autocomplete="off"
                      v-model="x"
                    />
                  </div>
                  <div class="mb-3 col-sm-4 col-xs-12">
                    <h6 class="text-dark" for="salePrice">y</h6>
                    <input
                      type="text"
                      class="form-control"
                      autocomplete="off"
                      v-model="y"
                    />
                  </div>
                  <div class="mb-3 col-sm-4 col-xs-12">
                    <h6 class="text-dark" for="marginResult">z</h6>
                    <input
                      type="text"
                      class="form-control"
                      autocomplete="off"
                      disabled
                      v-model="z"
                    />
                  </div>
                </div>
              </form>

脚本

  data() {
    return {
      x: 0,
      y: 0,
      z: 0,
    };
  },
  computed:{
  },

Answer 1

为什么要使用输入文本类型？您可以在输入字段中使用数字类型。如果你需要文本的总和，你可以删除 parseInt 和输入类型到文本。

检查此代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue JS Intro</title>
</head>
<body>
    <div id="demo">
   <form>
                <div class="row">
                  <div class="mb-3 col-sm-4 col-xs-12">
                    <h6 class="text-dark" for="purchasePrice">x</h6>
                    <input
                      type="number"
                      class="form-control"
                      autocomplete="off"
                      v-model="x"
                    />
                  </div>
                  <div class="mb-3 col-sm-4 col-xs-12">
                    <h6 class="text-dark" for="salePrice">y</h6>
                    <input
                      type="number"
                      class="form-control"
                      autocomplete="off"
                      v-model="y"
                    />
                  </div>
                  <div class="mb-3 col-sm-4 col-xs-12">
                    <h6 class="text-dark" for="marginResult">z</h6>
                    <input
                      type="number"
                      class="form-control"
                      autocomplete="off"
                      disabled
                      :value="parseInt(x)+ parseInt(y)"
                    />
                  </div>
                </div>
              </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                x: 0,
                y:0,
              
            },

            }
        )
    </script>
</body>
</html>

Vue 3 中每个标签的数学运算？

Mathematical operations for each tag in Vue 3?

javascript

typescript

vue.js

vuejs3