Javascript 如何在vueJS中添加数字

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

+ 
+ 
=
{{num1+num2+num3}}
const app=新的Vue({
el:“#vue_mult”，
数据：{
num1:0，
num2:0，
num3:0
}//结束数据属性
})//结束Vue对象

num1

、

num2

和

num3

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

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

---

这是因为每个输入的值都自动是字符串（在HTML/HTTP中，所有内容都是一个字符串），因此默认情况下是连接的。我将对一个方法（或计算属性）进行求和，并在运算期间将值转换为整数。这也分离了一些顾虑——使模板更干净

const-app=新的Vue({
el:“#vue_mult”，
数据：{
num1:80，
num2:80，
num3:80
},
方法：{
总和：函数（nums）{
设结果=0；
nums.forEach（函数（n）{result+=n*1；}）；
返回结果
}
}
//结束数据属性
})//结束Vue对象

+ 
+ 
=
{{sum（[num1，num2，num3]）}

您只需将字符串解析为数字，然后就可以开始了。

基本上，当您尝试对字符串使用

+

运算符时，它执行的是

串联

而不是加法。因此，要执行数学运算，您需要将字符串解析为数字。大概是这样的：-

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

为什么它与其他符号一起工作。

当您调用other（除加法外的任何其他运算符）时，它会使用

toNumber

函数在内部更改其号码。因此，它们的工作原理与任何正常数字相同

let sub=`1`-`1`；
设mul=`1`*`2`；
设div=`1`/`1`；
控制台日志（sub）；
控制台日志（mul）
console.log（div）

对于

v-model

指令有一个修饰符，您可以在这种情况下使用它

以下是一个例子：

---

reduce

可能比

forEach

更合适、更简洁，如果您试图将数组的所有值合并为一个值

sum:nums=>nums.reduce（（a，b）=>a+b，0）

，如果

nums

@CertainPerformance

中始终至少有一个元素，则可以删除0。reduce（）

是我还没有时间探索的数组方法之一，因此这是一个很好的信息。请举例说明如何使用它？