怎样使用 Svelte 中的“输入框组绑定”功能

正文

输入框组绑定指定是某些类型的 input 标签的值共同作用于一个变量，比如一个选择男女的单选框，它们的值的变化就应该作用于同一个变量，此时就可以用输入框组绑定功能：bind:group={gender}。

<script>
  let gender = 1;
  $: console.log(gender);
</script>

<label>
  <input type="radio" bind:group={gender} value={1} />
  male
</label>

<label>
  <input type="radio" bind:group={gender} value={2} />
  female
</label>

同理，多个复选框属于一组，那它们值的变化也应该作用于同一个数组，比如下面这个选择你喜欢的水果的多选组件，就是演示的这一情况：

<script>
  let likeList = [];
  $: console.log(likeList);
</script>

<label>
  <input type="checkbox" bind:group={likeList} value="apple" />
  苹果
</label>

<label>
  <input type="checkbox" bind:group={likeList} value="banana" />
  香蕉
</label>

<label>
  <input type="checkbox" bind:group={likeList} value="watermelon" />
  西瓜
</label>

注意

这些组都可以使用列表渲染简化代码，如下：

<script>
  let likeList = [];
  const labels = [
    { value: "apple", label: "苹果" },
    { value: "banana", label: "香蕉" },
    { value: "watermelon", label: "西瓜" },
  ];
  $: console.log(likeList);
</script>

{#each labels as { value, label }}
  <label>
    <input type="checkbox" bind:group={likeList} {value} />
    {label}
  </label>
{/each}

参考

https://www.sveltejs.cn/tutorial/group-inputs