按钮函数使用 Vuejs 将两个数字相加

Question

我正在尝试使用 VueJs 显示两个数字的总和，但我想开发这段代码，以便在用户单击按钮时获取总和。请帮助我！

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
  
<div id="app">
            Enter number 1:<input type="number" name="number1" v-model="number1">
            <p></p>
            Enter number 2:<input type="number" name="number2" v-model="number2">
            <p></p>
            <hr>
            <p>TOTAL:{{ result }}</p>
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
  },
  computed: {
    result() {
        return parseInt(this.number1) + parseInt(this.number2);

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

Answer 1

您可以添加一个“计算”按钮并使用 v-on 指令来监听点击事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
<body>

<div id="app">
    Enter number 1:<input type="number" name="number1" v-model="number1">
    <p></p>
    Enter number 2:<input type="number" name="number2" v-model="number2">
    <p></p>
    <hr>
    <button v-on:click="result = parseInt(number1) + parseInt(number2)">Calculate</button>
    <p>TOTAL:{{ result }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        number1: 0,
        number2: 0,
        result: null,
    },
});
</script>
</body>
</html>

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
  
<div id="app">
            Enter number 1:<input type="number" name="number1" v-model="number1">
            <p></p>
            Enter number 2:<input type="number" name="number2" v-model="number2">
            <p></p>
<button @click="add()">Sum</button>
            <hr>
            <p>TOTAL:{{ result }}</p>
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
    result:0
  },
  methods: {
    add() {
        this.result= parseInt(this.number1) + parseInt(this.number2);

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

按钮函数使用 Vuejs 将两个数字相加

button function to sum of two numbers using Vuejs

javascript

vue.js

vue-component