Question

我正在玩Vue中的一个组件。我试图有两个输入框。每个框都可以输入一个整数，然后使用按钮将该整数保存到data属性。然后，我想使用另一个按钮将数据中保存的两个整数相加并将其作为文本插值输出。我似乎无法破解或在任何地方找到答案。总的来说，我对编程和Vue很陌生。

<template>

<template>
<!-- https://stackoverflow.com/questions/42694457/getting-form-data-on-submit -->
<div>
  <div>
  <form @submit.prevent="getFormValues" class="inputPad">
  <input type="text" name="name">
  <button>Save Amount</button>
  </form>
  <form @submit.prevent="getFormValues2" class="inputPad">
  <input type="text" name="name">
  <button>Save Amount</button>
  </form>

  </div>
  <div>
  {{ totalBox1 }}<br>
  {{ totalBox2 }}<br>
  <p>Calculate Total</p>
  <button @submit="addTogether">Calculate Total</button>
  {{ total }}
  </div>

</div>
</template>

<script>
export default {
  name: "Calculate",
  data() {
    return {
      total: "0",
      totalBox1: "0",
      totalBox2: "0"
    };
  },
  methods: {
    getFormValues(submitEvent1) {
      this.totalBox1 = submitEvent1.target.elements.name.value;
    },
    getFormValues2(submitEvent) {
      this.totalBox2 = submitEvent.target.elements.name.value;
    }
  },
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.inputPad {
  padding: 10px;
}
</style>

Answer 1

如何在不使用v模型的情况下进行操作：

<template>
<div>
  <div>

  <input type="text" @change="saveValue1($event)" name="name">
  <input type="text" @change="saveValue2($event)"  name="name">

      </div>
      <div>
      {{ totalBox1 }}<br>
      {{ totalBox2 }}<br>
      <p>Calculate Total</p>
      {{ getTotal }}
      </div>

    </div>
    </template>

    <script>
    export default {
      name: "Calculate",
      data() {
        return {
          totalBox1: "0",
          totalBox2: "0",
        };
      },
      methods:{
        saveValue1(event){
          this.totalBox1=event.target.value;
        },
        saveValue2(event){
          this.totalBox2=event.target.value;
        }
      },
      computed: {
        getTotal:function(){
          return parseInt(this.totalBox1)+parseInt(this.totalBox2);
        }
      }
    };
    </script>

    <style scoped>
    .inputPad {
      padding: 10px;
    }
    </style>

详细了解事件绑定：https://vuejs.org/v2/guide/events.html

和计算的属性：https://vuejs.org/v2/guide/computed.html

Answer 2

不需要方法：

<template>
<div>
  <input type="text" v-model="item1"><br>
  <input type="text" v-model="item2">
  <p>Total</p>
  {{ total }}
</div>
</template>

<script>
export default {
  name: "Calculate",
  data() {
    return {
      item1: 0,
      item2: 0
    }
  },
  computed: {
    total () {
      return this.item1 + this.item2
    }
  }
}
</scrip>

Answer 3

这是使用按钮逐步进行操作的方法，我展示了两种计算总数的方法：使用和不使用方法

<template>
  <div>

    <input type="text" v-model="input1">
    <input type="text" v-model="input2">

    <button @click="value1 = input1">save value 1</button>
    <button @click="value2 = input2">save value 2</button>

    <button @click="calculateTotal()">calculate total</button>
    <button @click="total = value1 + value2">calculate total</button>

    total : {{ total }}

  </div>
</template>

<script>
export default {
  name: "Calculate",
  data() {
    return {
      input1: 0,
      input2: 0,
      value1: 0,
      value2: 0,
      total: 0,
    };
  },
  methods:{
    calculateTotal(){
      this.total = this.input1 + this.input2;
    }
  }
};
</script>

您可能不希望所有的中间按钮都单击，所以您可以直接使用绑定到输入的值来完成此操作：

<template>
  <div>

    <input type="text" v-model="value1">
    <input type="text" v-model="value2">

    <button @click="total = value1 + value2">calculate total</button>

    total : {{ total }}

  </div>
</template>

<script>
export default {
  name: "Calculate",
  data() {
    return {
      value1: 0,
      value2: 0,
      total: 0,
    };
  }
};
</script>

Answer 4

根据要求。您要做的就是创建2个输入并将它们链接到一个日期，然后根据以下代码进行计算。

<div id="app">
<input v-model.number="value1" type="number"/>
<button v-on:click="val1">Save Amount</button>
<input v-model.number="value2" type="number"/>
<button v-on:click="val2">Save Amount</button>
<button @click="valueTotal">Total</button>
Total: {{total}}
</div>


new Vue({
el: '#app',
methods: {
val1 () {
    this.totalBox1 = this.value1
},
val2 () {
    this.totalBox2 = this.value2
},
valueTotal () {
    this.total = this.totalBox1 + this.totalBox2
}
},
data: {
totalBox1: '',
totalBox2: '',
value1: 0,
value2: 0,
total: ''
}
})

示例： https://jsfiddle.net/hamiltongabriel/ke8w9czy/

Vue-使用方法将两个输入加在一起并保存到数据中

4 个答案: