怎样使用 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}
