如何在vueJS中添加数字

Question

如果我将 {{ num1+num2+num3 }} 处的符号更改为乘法 (*) 或减法 (-) 的符号，效果会很好。然而，当尝试使用 (+) 添加时，它只是连接起来。

    <div id="vue_mult">
    <input type="number" v-model="num1"  min="78" max="98" /> + 
    <input type="number" v-model="num2"  min="78" max="98" /> + 
    <input type="number" v-model="num3"  min="78" max="98" /> =
    {{ num1+num2+num3 }}
</div>
    <script>
    const app = new Vue({
        el:'#vue_mult',
        data: {  
            num1:0,
            num2:0,
            num3:0
        } //end data property 
    }) //end Vue object
</script>
</body>
</html>

Answer 1

这是因为每个输入的值自动都是字符串（天哪，HTML/HTTP 中的所有内容都是字符串），因此默认情况下会连接起来。我将对方法（或计算属性）进行求和，并在操作期间将值转换为整数。这也消除了一些担忧——使您的模板更加干净。

    const app = new Vue({
        el:'#vue_mult',
        data: {  
            num1:80,
            num2:80,
            num3:80
        },
        methods: {
            sum: function(nums){
                let result = 0;
                nums.forEach(function(n){ result += n * 1; });
                return result
            }
        }
//end data property 
    }) //end Vue object

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

    <div id="vue_mult">
    <input type="number" v-model="num1"  min="78" max="98" /> + 
    <input type="number" v-model="num2"  min="78" max="98" /> + 
    <input type="number" v-model="num3"  min="78" max="98" /> =
    {{ sum([num1, num2, num3]) }}
</div>

</body>
</html>

Answer 2

num1、num2和num3都是字符串，在添加之前先将它们转换为数字：

{{ Number(num1) + Number(num2) + Number(num3) }}