Svelte 中如何使用 Radio 按钮绑定变量

387字
2分钟
2024-08-15
- Svelte

在前端开发中，处理表单元素时，radio 按钮是一个常见的选择控件。Svelte 框架中，radio 按钮的绑定十分简单且直观，本文将展示如何通过 bind:group 属性将多个 radio 按钮绑定到同一个变量，并根据用户的选择自动更新该变量。

实现步骤

1. 创建变量

首先，我们需要在 Svelte 组件的 <script> 标签中定义一个变量，用来存储用户选择的 radio 按钮的值：

1
<script>
2
    let selectedOption = "option1";
3
</script>

2. 设置 Radio 按钮

然后，在 HTML 部分使用 input 标签来创建多个 radio 按钮，并通过 bind:group={selectedOption} 将它们绑定到同一个变量 selectedOption：

1
<label>
2
    <input type="radio" bind:group={selectedOption} value="option1">
3
    Option 1
4
</label>
5
<label>
6
    <input type="radio" bind:group={selectedOption} value="option2">
7
    Option 2
8
</label>
9
<label>
10
    <input type="radio" bind:group={selectedOption} value="option3">
11
    Option 3
12
</label>

3. 显示选中的值

通过 Svelte 的双向数据绑定机制，当用户选择不同的 radio 按钮时，selectedOption 会自动更新为选中的 value 值。我们可以将该值显示出来：

1
<p>Selected option: {selectedOption}</p>

完整示例

1
<script>
2
    let selectedOption = "option1";
3
</script>
4

5
<label>
6
    <input type="radio" bind:group={selectedOption} value="option1">
7
    Option 1
8
</label>
9
<label>
10
    <input type="radio" bind:group={selectedOption} value="option2">
11
    Option 2
12
</label>
13
<label>
14
    <input type="radio" bind:group={selectedOption} value="option3">
15
    Option 3
16
</label>
17

18
<p>Selected option: {selectedOption}</p>