表单输入

表单输入

表单输入绑定（v-model）, v-model 可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合

• 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
• <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
• <select> 会绑定 value property 并侦听 change 事件。

v-model

示例 1：文本输入框

<template>
  <input v-model="message" type="text" />
  <p>{{ message }}</p>
</template>

<script setup>
  import { ref } from "vue";

  const message = ref("");
</script>

上述示例中，使用了 <input> 元素的 v-model 指令来将输入框的值与 message 变量进行双向绑定。当输入框的值发生改变时，message 变量也会自动更新，反之亦然。

示例 2：复选框

<template>
  <input v-model="checked" type="checkbox" />
  <p>{{ checked ? 'Checked' : 'Not Checked' }}</p>
</template>

<script setup>
  import { ref } from "vue";

  const checked = ref(false);
</script>

上述示例中，使用了 <input> 元素的 v-model 指令来将复选框的选中状态与 checked 变量进行双向绑定。当复选框的选中状态改变时，checked 变量也会自动更新，反之亦然。

注意事项

在 Vue 3 中，复选框的 v-model 绑定的是一个布尔值，而不是复选框的值本身。如果你希望绑定其他值，请参考后续的示例。

示例 3：单选框

<template>
  <label>
    <input v-model="radio" type="radio" value="option1" />
    Option 1
  </label>
  <label>
    <input v-model="radio" type="radio" value="option2" />
    Option 2
  </label>
  <p>Selected option: {{ radio }}</p>
</template>

<script setup>
  import { ref } from "vue";

  const radio = ref("option1");
</script>

上述示例中，使用了多个单选框，并将它们的值与 radio 变量进行绑定。通过设置 v-model 的 value 属性，可以指定单选框对应的值。当选择不同的单选框时，radio 变量的值也会相应地更新。

注意事项

在 Vue 3 中，单选框的 v-model 绑定的是选中的值，而不是布尔值。因此， v-model 属性的值应与每个单选框的 value 属性对应起来。

示例 4：下拉框

<template>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
  <p>Selected option: {{ selected }}</p>
</template>

<script setup>
  import { ref } from "vue";

  const selected = ref("");
</script>

上述示例中，使用了 <select> 元素，并将其选中的值与 selected 变量进行绑定。通过给每个 <option> 元素设置相应的 value 属性，可以指定下拉选择框中的选项。当选择不同的选项时，selected 变量的值也会相应地更新。

注意事项

在 Vue 3 中，下拉选择框的 v-model 绑定的是选中的值。为了确保首先禁用的选项不会成为默认选中，需要添加一个具有空字符串值的禁用选项。