6.4.3 复选框与单选框

在Web开发中，表单（Forms）是收集用户输入数据的关键组件，而复选框（Checkboxes）和单选框（Radio Buttons）则是表单中常见的两种输入类型，它们允许用户从一组选项中选择一个或多个选项。在Vue.js结合TypeScript的项目中，正确处理这两种输入类型对于构建用户友好的界面至关重要。本章节将深入探讨如何在Vue.js和TypeScript环境下使用复选框与单选框，包括基本用法、数据绑定、以及处理用户输入的逻辑。

6.4.3.1 复选框（Checkboxes）

复选框允许用户从一组选项中选择多个选项。在Vue中，复选框的v-model指令可以非常方便地实现双向数据绑定，使得组件的数据状态与UI界面保持同步。

基本用法

假设我们有一个用户兴趣爱好的表单，用户可以选择多个兴趣：

<template>
  <div>
    <h3>请选择您的兴趣爱好：</h3>
    <label for="reading">阅读</label>
    <input type="checkbox" id="reading" v-model="hobbies" value="reading">
    <label for="coding">编程</label>
    <input type="checkbox" id="coding" v-model="hobbies" value="coding">
    <label for="traveling">旅行</label>
    <input type="checkbox" id="traveling" v-model="hobbies" value="traveling">
    <p>您选择的兴趣爱好是：{{ hobbies }}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const hobbies = ref<string[]>([]); // 使用ref来创建响应式数组
    return { hobbies };
  }
});
</script>

在这个例子中，hobbies是一个响应式数组，用于存储用户选择的兴趣爱好。每当用户勾选或取消勾选复选框时，hobbies数组都会自动更新，并反映在页面上。

数组与对象的结合使用

有时候，我们可能希望将复选框的值与对象的属性关联起来，以便更灵活地处理数据。例如：

<template>
  <div>
    <h3>请选择您的技能：</h3>
    <label for="js">JavaScript</label>
    <input type="checkbox" id="js" v-model="skills.js" true-value="expert" false-value="novice">
    <label for="vue">Vue.js</label>
    <input type="checkbox" id="vue" v-model="skills.vue" true-value="proficient" false-value="beginner">
    <p>您的技能水平：</p>
    <ul>
      <li>JavaScript: {{ skills.js }}</li>
      <li>Vue.js: {{ skills.vue }}</li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
export default defineComponent({
  setup() {
    const skills = reactive({
      js: 'novice',
      vue: 'beginner'
    });
    return { skills };
  }
});
</script>

这里，我们使用了reactive来创建一个响应式对象skills，每个属性的值都可以是字符串或其他类型。v-model与true-value和false-value属性一起使用，以控制复选框选中或未选中时绑定的属性值。

6.4.3.2 单选框（Radio Buttons）

单选框允许用户从一组选项中选择一个选项。与复选框不同，单选框通过name属性来分组，确保同一组内的单选框只能选中一个。

基本用法

假设我们有一个性别选择的表单：

<template>
  <div>
    <h3>请选择您的性别：</h3>
    <label for="male">男</label>
    <input type="radio" id="male" name="gender" v-model="gender" value="male">
    <label for="female">女</label>
    <input type="radio" id="female" name="gender" v-model="gender" value="female">
    <p>您选择的性别是：{{ gender }}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const gender = ref<string | null>(null); // 初始化为null，表示未选择
    return { gender };
  }
});
</script>

在这个例子中，gender是一个响应式引用，用于存储用户选择的性别。通过v-model实现双向数据绑定，使得gender的值与单选框的选中状态保持一致。注意，所有属于同一组的单选框应具有相同的name属性值。

动态生成单选框

在实际应用中，单选框的选项可能来自后端数据或需要动态生成。Vue的列表渲染指令v-for可以很方便地实现这一点：

<template>
  <div>
    <h3>请选择您的职业：</h3>
    <div v-for="option in careerOptions" :key="option.value">
      <label :for="option.value">{{ option.text }}</label>
      <input type="radio" :id="option.value" name="career" v-model="career" :value="option.value">
    </div>
    <p>您选择的职业是：{{ career }}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const careerOptions = ref([
      { text: '教师', value: 'teacher' },
      { text: '工程师', value: 'engineer' },
      { text: '设计师', value: 'designer' }
    ]);
    const career = ref<string | null>(null);
    return { careerOptions, career };
  }
});
</script>

在这个例子中，careerOptions是一个包含职业选项的响应式数组，每个选项都是一个包含text和value属性的对象。通过v-for指令遍历careerOptions，动态生成单选框。用户的选择会更新career的值。

总结

复选框和单选框是表单中常见的输入类型，它们在Vue.js结合TypeScript的项目中扮演着重要角色。通过v-model指令，我们可以轻松实现数据的双向绑定，使得UI界面与组件数据状态保持同步。同时，结合ref、reactive以及v-for等Vue的核心功能，我们可以灵活地处理复杂的数据绑定和动态生成选项的需求。掌握这些技巧，将有助于你构建更加动态和交互性强的Web应用。