如何用Vue根据0-31数值控制复选框状态并同步更新数值？

这是个典型的位运算双向绑定场景，正好可以借助Vue的响应式特性结合位运算来优雅解决，完全不用手动通过ID逐个操作复选框，代码简洁还易维护。

核心思路 #

每个复选框的值都是2的幂次（1、2、4、8、16），这刚好对应Result数值二进制的每一位。我们可以利用位运算快速判断复选框是否该选中，同时在用户点击复选框时同步更新Result的值：

• 判断选中状态：用Result和复选框的值做按位与，结果不为0就说明该位是1，复选框需要选中。
• 更新数值：选中时用按位或把对应位设为1，取消选中时用按位与取反把对应位设为0。

完整实现代码 #

<template>
  <div class="form-group">
    <!-- Issue1：对应二进制第0位 -->
    <input 
      class="checkbox" 
      data-role="checkbox" 
      data-caption="Issue1" 
      id="ch1" 
      :value="1"
      :checked="(result & 1) !== 0"
      @change="updateResult(1, $event.target.checked)"
    />
    <!-- Issue2：对应二进制第1位 -->
    <input 
      class="checkbox" 
      data-role="checkbox" 
      data-caption="Issue2" 
      id="ch2"
      :value="2"
      :checked="(result & 2) !== 0"
      @change="updateResult(2, $event.target.checked)"
    />
    <!-- Issue3：对应二进制第2位 -->
    <input 
      class="checkbox" 
      data-role="checkbox" 
      data-caption="Issue3" 
      id="ch3"
      :value="4"
      :checked="(result & 4) !== 0"
      @change="updateResult(4, $event.target.checked)"
    />
    <!-- Issue4：对应二进制第3位 -->
    <input 
      class="checkbox" 
      data-role="checkbox" 
      data-caption="Issue4" 
      id="ch4"
      :value="8"
      :checked="(result & 8) !== 0"
      @change="updateResult(8, $event.target.checked)"
    />
    <!-- Issue5：对应二进制第4位 -->
    <input 
      class="checkbox" 
      data-role="checkbox" 
      data-caption="Issue5" 
      id="ch5"
      :value="16"
      :checked="(result & 16) !== 0"
      @change="updateResult(16, $event.target.checked)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: 0 // 这里替换成你从服务端获取的app.$data.Result即可
    };
  },
  methods: {
    updateResult(bitValue, isChecked) {
      if (isChecked) {
        // 选中时，按位或操作：把对应位强制设为1，不影响其他位
        this.result |= bitValue;
      } else {
        // 取消选中时，按位与取反操作：把对应位强制设为0，不影响其他位
        this.result &= ~bitValue;
      }
    }
  }
};
</script>

关键逻辑拆解 #

举个例子，当Result=3（二进制是11）：

• 对于Issue1（value=1，二进制00001），3 & 1 = 1，结果不为0，所以复选框选中；
• 对于Issue2（value=2，二进制00010），3 & 2 = 2，结果不为0，复选框也选中；
• 其他Issue的Result & value结果都是0，所以不选中，完全符合你的需求。

当用户点击Issue3（value=4）选中它时，3 | 4 = 7，Result就变成7；如果再取消Issue1，7 & ~1 = 6，Result就变成6，完美同步数值。

进阶优化：循环生成复选框 #

如果后续可能新增更多Issue，建议用数组循环生成复选框，避免重复代码：

<template>
  <div class="form-group">
    <input 
      v-for="issue in issueList"
      :key="issue.id"
      class="checkbox" 
      data-role="checkbox" 
      :data-caption="issue.caption" 
      :id="issue.id"
      :value="issue.bitValue"
      :checked="(result & issue.bitValue) !== 0"
      @change="updateResult(issue.bitValue, $event.target.checked)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: 0,
      issueList: [
        { id: 'ch1', caption: 'Issue1', bitValue: 1 },
        { id: 'ch2', caption: 'Issue2', bitValue: 2 },
        { id: 'ch3', caption: 'Issue3', bitValue: 4 },
        { id: 'ch4', caption: 'Issue4', bitValue: 8 },
        { id: 'ch5', caption: 'Issue5', bitValue: 16 }
      ]
    };
  },
  methods: {
    updateResult(bitValue, isChecked) {
      if (isChecked) {
        this.result |= bitValue;
      } else {
        this.result &= ~bitValue;
      }
    }
  }
};
</script>

以后要加Issue6（value=32），只需要在issueList里加一条{ id: 'ch6', caption: 'Issue6', bitValue: 32 }就行，完全不用改模板，扩展性拉满。

内容的提问来源于stack exchange，提问作者JohnConnor