如何让Aurelia的checkbox绑定使用1/0替代默认的true/false值

所有技术栈实现的核心逻辑通用：

• 给checkbox的checked属性赋值时，仅判断变量是否严格等于1，等于则返回true（选中），0/null等其余值都返回false（未选中）
• 监听checkbox的状态变更事件时，选中则给变量赋值1，未选中则赋值0

原生JavaScript #

// 初始化变量与DOM元素
let bindVal = 0 // 初始值可替换为1 / null
const checkbox = document.querySelector('input[type="checkbox"]')

// 初始化选中状态
checkbox.checked = bindVal === 1

// 绑定状态变更事件
checkbox.addEventListener('change', () => {
  bindVal = checkbox.checked ? 1 : 0
  // 可追加后续业务逻辑
})

Vue 2/3 通用实现 #

<template>
  <input
    type="checkbox"
    :checked="bindVal === 1"
    @change="bindVal = $event.target.checked ? 1 : 0"
  >
</template>

<script>
export default {
  data() {
    return {
      bindVal: 0 // 初始值可替换为1 / null
    }
  }
}
</script>

如果是Vue3 setup语法，直接将bindVal定义为ref响应式变量即可，模板写法保持不变。

React 实现 #

import { useState } from 'react'

function CheckboxDemo() {
  // 初始化变量，初始值可替换为1 / null
  const [bindVal, setBindVal] = useState(0)

  return (
    <input
      type="checkbox"
      checked={bindVal === 1}
      onChange={(e) => setBindVal(e.target.checked ? 1 : 0)}
    />
  )
}

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