Svelte 的 e.target.value 特性

在 Svelte 中，e.target.value 是一个事件对象的属性，它表示输入元素的当前值。当我们在表单元素（如文本框、下拉框等）中输入内容时，我们可以通过监听这个特性来获取当前输入元素的值。

监听 e.target.value

在 Svelte 中，我们可以借助 on:input 事件，监听输入元素内容的变化，并处理事件对象中的 e.target.value 特性：

<script>
  let inputVal = '';
  
  function handleInput(event) {
    inputVal = event.target.value;
  }
</script>

<form>
  <input type="text" on:input={handleInput} />
  <p>当前输入：{inputVal}</p>
</form>

在上面的例子中，我们定义了一个 handleInput 函数，并将它绑定到一个文本输入框的 on:input 事件中。在函数中，通过 event.target.value 获取当前输入框的值，并将其赋值给 inputVal 变量，最后在页面中显示出来。

处理多个输入元素

当我们需要处理多个输入元素时，我们可以通过 Svelte 的双向绑定特性，将输入值绑定到组件的属性中：

<script>
  let name = '';
  let age = '';
</script>

<form>
  <label for="name">姓名：</label>
  <input id="name" type="text" bind:value={name} />

  <label for="age">年龄：</label>
  <input id="age" type="number" bind:value={age} />
</form>

<p>姓名：{name}</p>
<p>年龄：{age}</p>

在上面的例子中，我们利用 bind:value={name} 和 bind:value={age} 将输入框的值双向绑定到组件的 name 和 age 属性中，从而方便地读取和设置输入值。

总结

通过监听 e.target.value 特性可以轻松获取输入元素的值，结合 Svelte 的双向绑定特性，我们可以更方便地处理表单内容。