React, Vue 및 Svelte: 체크박스 바인딩 비교

체크박스 바인딩...

반응하다

const [checked, setChecked] = useState<boolean>(false);
const handleCheckbox = () => setChecked(!checked);

<section>
  <h2>Checkbox</h2>
  <input
    type="checkbox"
    id="checkbox"
    checked={checked}
    onChange={handleCheckbox}
  />
  <label for="checkbox">Checked: {checked.toString()}</label>
</section>

뷰

const checked: Ref<boolean> = ref(false);

<section>
  <h2>Checkbox</h2>
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label htmlFor="checkbox">Checked: {checked.toString()}</label>
</section>

날씬한

let checked: boolean = false;

<section>
  <h2>Checkbox</h2>
  <input type="checkbox" id="checkbox" bind:checked={checked} />
  <label for="checkbox">Checked: {checked}</label>
</section>