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

num1，num2和num3是字符串，请先将它们转换为数字，然后再添加：

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

Answer 2

这是因为每个输入的值都是自动字符串（地狱，所有内容都是HTML / HTTP中的字符串），因此默认情况下会被串联。我将对方法（或计算属性）进行求和，然后在操作过程中将值转换为整数。这也消除了一些问题-使模板可以说更干净。

View.post()

    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

Answer 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)

Answer 4

您可以在这种情况下使用 v-model 指令的 .number 修饰符。

这是一个例子：

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

如何在vueJS中添加数字

4 个答案: