如何在 vueJS 中添加数字答案

【问题标题】：How to ADD numbers in vueJS如何在 vueJS 中添加数字
【发布时间】：2018-12-12 04:43:50
【问题描述】：

如果我用乘法 (*) 或减法 (-) 的符号更改 {{ 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>

【问题讨论】：

标签： javascript vue.js add

【解决方案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>

【讨论】：

reduce 可能比forEach 更合适、更简洁，如果您尝试将数组的所有值组合成一个值。 sum: nums => nums.reduce((a, b) => a + b, 0)，如果nums 中总是至少有一个元素，您可以删除 0
@CertainPerformance .reduce() 是数组方法之一，我还没有时间探索，所以这是很好的信息。

【解决方案2】：

num1、num2 和 num3 是字符串，添加前先转换为数字：

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

【讨论】：

【解决方案3】：

您只需将字符串解析为数字即可。

基本上，当您尝试在字符串上使用+ 运算符时，它会执行concatenation 而不是加法。因此，要进行数学运算，您需要将字符串解析为数字。像这样：-

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

为什么它适用于其他符号。

当您调用除加法之外的其他任何其他运算符时，它会使用toNumber 函数在内部更改其编号。所以它们的工作方式与任何普通号码一样。

let sub = `1`-`1`;
let mul = `1` * `2`;
let div = `1` / `1`;

console.log(sub);
console.log(mul)
console.log(div)

【讨论】：

【解决方案4】：

v-model 指令有一个 .number 修饰符，您可以在这种情况下使用它。

这是一个例子：

https://codepen.io/bengu/pen/GRNXNbe

【讨论】：

你能举一个例子来说明它是如何使用的吗？