Vue.js中如何将Checkbox的true/false值改为1/0？

你当前代码里设置的value="1"不会生效——单个Checkbox的v-model默认绑定布尔值（true/false），原生value属性仅在多个Checkbox绑定同一数组时，才会将选中项的value加入数组。

下面是两种可行的解决方法：

方法1：使用Vue专属的true-value和false-value（推荐） #

这是Vue为单个Checkbox提供的特殊属性，可直接指定选中/未选中时的绑定值，支持字符串或数字类型：

<div class="form-check">
    <input class="form-check-input" type="checkbox" 
           id="flexCheckDefault"
           v-model="discount.has_limit_times_use"
           :true-value="1" <!-- 动态绑定数字1 -->
           :false-value="0"> <!-- 动态绑定数字0 -->
    <label class="form-check-label" for="flexCheckDefault">
        Limit number of times this discount can be used in total
    </label>
</div>

• 注意加冒号: 做动态绑定，否则值会是字符串类型的"1"/"0"；不加冒号的话，绑定的是字符串。
• 绑定后，discount.has_limit_times_use在选中时为数字1，未选中时为数字0。

方法2：用计算属性实现双向绑定（适合复杂场景） #

如果需要对绑定值做更多逻辑处理，可通过计算属性封装双向转换逻辑：

Vue 2 选项式API示例 #

export default {
  data() {
    return {
      discount: {
        // 用内部变量存储原始布尔值
        _has_limit_times_use: false
      }
    }
  },
  computed: {
    'discount.has_limit_times_use': {
      get() {
        // 读取时转成1/0
        return this.discount._has_limit_times_use ? 1 : 0
      },
      set(val) {
        // 赋值时转成布尔值（兼容外部传入1/0或直接点击checkbox的true/false）
        this.discount._has_limit_times_use = val === 1 || val === true
      }
    }
  }
}

Vue 3 组合式API示例 #

import { ref, computed } from 'vue'

export default {
  setup() {
    const discount = ref({
      _has_limit_times_use: false
    })

    const hasLimitTimesUse = computed({
      get() {
        return discount.value._has_limit_times_use ? 1 : 0
      },
      set(val) {
        discount.value._has_limit_times_use = val === 1 || val === true
      }
    })

    return {
      discount: {
        ...discount.value,
        has_limit_times_use: hasLimitTimesUse
      }
    }
  }
}

模板部分无需修改，依然使用原v-model绑定即可。

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