Svelte 绑定下拉框

正文

任何表单控件都可以绑定，只是绑定的属性有所不同而已（大部分是 value）。

<script>
  let value = 2;
  // let value = []; // 多选时为数组

  const options = [
    { name: "apple", value: 0 },
    { name: "banana", value: 1 },
    { name: "watermelon", value: 2 },
    { name: "tomato", value: 3 },
  ];

  $: console.log(value);
</script>

<!-- 多选时添加 multiple 属性 -->
<select bind:value>
  {#each options as { name, value }}
    <option {value}>{name}</option>
  {/each}
</select>

这里使用了 each 块做模板简化，通过 bind:value 收集当前选中的 value 值。

参考

https://www.sveltejs.cn/tutorial/select-bindings