Vue实现各类题型：用循环轻松搞定！

2023-12-04 19:16:27

正文：

在现代前端开发中，Vue.js 已成为构建交互式界面的首选框架之一。其灵活的数据绑定和组件化开发方式，让开发人员能够轻松创建动态和可交互的应用程序。在这个教程中，我们将探索如何使用 Vue 实现单选题、多选题和判断题这三种常见题型的动态渲染。

准备工作

首先，我们需要创建一个新的 Vue 项目。你可以使用 Vue CLI 或手动创建项目。为了简化起见，我们假设你已经拥有了一个基本的 Vue 项目。在项目中，创建一个名为 Question.vue 的组件。这个组件将负责渲染单个题目。

<template>
  <div>
    <h2>{{ question.title }}</h2>
    <div v-if="question.type === 'radio'">
      <label v-for="option in question.options" :key="option.value">
        <input type="radio" :value="option.value" v-model="answer">
        {{ option.label }}
      </label>
    </div>
    <div v-else-if="question.type === 'checkbox'">
      <label v-for="option in question.options" :key="option.value">
        <input type="checkbox" :value="option.value" v-model="answer">
        {{ option.label }}
      </label>
    </div>
    <div v-else>
      <label>
        <input type="text" v-model="answer">
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: ['question'],
  data() {
    return {
      answer: null
    }
  }
}
</script>

渲染题型

下一步，我们需要在 App.vue 中使用 Question 组件来渲染不同的题型。为此，我们需要一个包含所有题目的数组。为了便于理解，我们将创建一个简单的数组，其中包含三个题目，每个题目都有不同的类型：

export default {
  data() {
    return {
      questions: [
        {
          type: 'radio',
          title: '哪位科学家提出了相对论？',
          options: [
            { value: '阿尔伯特·爱因斯坦', label: '阿尔伯特·爱因斯坦' },
            { value: '艾萨克·牛顿', label: '艾萨克·牛顿' },
            { value: '伽利略·伽利雷', label: '伽利略·伽利雷' }
          ]
        },
        {
          type: 'checkbox',
          title: '下列哪些动物属于猫科动物？',
          options: [
            { value: '狮子', label: '狮子' },
            { value: '老虎', label: '老虎' },
            { value: '豹子', label: '豹子' },
            { value: '狗', label: '狗' }
          ]
        },
        {
          type: 'text',
          title: '北京的故宫博物院始建于哪一年？',
          options: []
        }
      ]
    }
  }
}

循环渲染

现在，我们可以在 App.vue 的模板中使用 v-for 指令来循环渲染每个题目：

<template>
  <div>
    <h1>在线考试</h1>
    <Question v-for="question in questions" :key="question.title" :question="question" />
  </div>
</template>

这样，我们就能在页面上看到三个题目的动态渲染。

控制多选题选项选择

对于多选题，我们需要控制选项的选择状态。为此，我们在 Question.vue 中使用 v-model 指令将选项的 value 值绑定到 answer 数据。当用户选择或取消选择某个选项时，answer 的值将自动更新。

<template>
  <div>
    <h2>{{ question.title }}</h2>
    <div v-else-if="question.type === 'checkbox'">
      <label v-for="option in question.options" :key="option.value">
        <input type="checkbox" :value="option.value" v-model="answer">
        {{ option.label }}
      </label>
    </div>
  </div>
</template>