• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 5天前 9次浏览

正文

输入框组绑定指定是某些类型的 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


程序员灯塔
转载请注明原文链接:怎样使用 Svelte 中的“输入框组绑定”功能
喜欢 (0)