Question

所以我有3个复选框的3个布尔值，想法是我需要一个函数来添加一些值，该值基于选中的复选框，当我console.log（sum）时，我什么也没得到

calculateNumber() {
      const sum = 0
      if (this.ruleForm.ownerBoolean === true) { return sum + 1 }
      if (this.ruleForm.agentBoolean === true) { return sum + 2 }
      if (this.ruleForm.operatorBoolean === true) { return sum + 4 }
      console.log(sum)
    }

想法是，如果选中第一个复选框，则添加1，如果第二个复选框，则添加2，如果第三个复选框是4，我需要将求和的最终值求和，这是我做错了吗？

Answer 1

尝试一下：

calculateNumber() {
      let sum = 0
      if (this.ruleForm.ownerBoolean === true) { sum += 1 }
      if (this.ruleForm.agentBoolean === true) { sum += 2 }
      if (this.ruleForm.operatorBoolean === true) { sum += 4 }
      console.log(sum)
      return sum
    }

Answer 2

在登录之前，您已返回。首先计算sum变量的值，然后在方法末尾返回。

calculateNumber() {
    let sum = 0
    if (this.ruleForm.ownerBoolean === true) sum++
    if (this.ruleForm.agentBoolean === true) sum += 2
    if (this.ruleForm.operatorBoolean === true) sum += 4 
    console.log(sum)

    return sum
}

Answer 3

我猜您实际上想根据布尔值对sum求和。

在这种情况下，您需要删除return，而是按以下方式增加总和：

calculateNumber() {
  let sum = 0

  if( this.ruleForm.ownerBoolean === true   ) { sum+= 1; }
  if( this.ruleForm.agentBoolean === true   ) { sum+= 2; }
  if( this.ruleForm.operatorBoolean === true) { sum+= 4; }

  console.log(sum)
}

在return sum调用之后添加console.log也是一个好主意，这样您以后就可以实际使用该值了。

Answer 4

从MDN开始，return语句结束函数执行并指定要返回给函数调用者的值。例如，

........(some other code here)
var a = returnSomething();

function returnSomething() {
  if(b) { return 1; } //if b is true, next 2 lines will never execute and variable a will be assigned number 1
  if(c) { return 2; } //if a is true, next line will never execute and variable a will be assigned number 2
  console.log("this line will only print if both b and c are false.");
}

如果没有return语句，则默认返回undefined。当在函数主体中使用return语句时，函数的执行将停止。因此，有时我们仅使用return;来停止执行其余功能。

现在关于calculateNumber函数，您将返回sum + 1和其他函数，但是没有向变量sum添加任何内容。因此，无论如何，sum的值始终为0。必须返回sum = sum + 1（或2 /或4等）来代替返回。所以你的功能应该是这样的：

calculateNumber() {
  let sum = 0;
  if (this.ruleForm.ownerBoolean === true) { sum += 1 }
  if (this.ruleForm.agentBoolean === true) { sum += 2 }
  if (this.ruleForm.operatorBoolean === true) { sum += 4 }
  console.log(sum);
}

希望有帮助...：）

编辑：刚才注意到，您在声明const时使用了sum。在这种情况下，这是完全错误的，因为const是常量的缩写，您不能更改常量的值。因此请改用let或var。

Answer 5

为此，我写了一个简单的小提琴。遵循这种方法来满足您的需求。

HTML

var demo = new Vue({
  el: '#demo',
  data: {
    sum: 0,
    mainCategories: [{
        id: 1,
        name:"ownerBoolean"
      }, {
        id: 2,
        name:"agentBoolean"
      }, {
        id: 4,
        name:"operatorBoolean"
      }
      ] //testing with data use: [{done:false,content:'testing'}]
  },
  methods: {
    check: function(e) {
    if(e.target.checked ){
    this.sum  = parseInt(this.sum)  + parseInt(e.target.value) ;
    }
    else{
    this.sum  = parseInt(this.sum)  - parseInt(e.target.value) ;
    }
    }
  }
})

body {
  font-family: Helvetica Neue, Arial, sans-serif;
}

li.done {
  text-decoration: line-through;
}

[v-cloak] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" >
 <h3>SUM {{sum}}</h3>
  <ul>
    <li v-for="mainCat in mainCategories">
      <input type="checkbox" :value="mainCat.id" id="mainCat.id" @change="check($event)"> {{mainCat.name}}

    </li>
  </ul>
</div>

根据复选框添加数字

5 个答案: