《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作

<template>
<div style=" width: 100%;height: 650px;background-color: deepskyblue;border: 2px red solid">
  <div style="height: 600px;width: 400px;background-color: aliceblue;margin-left: 550px">
    <br><br>
    <h1>{
   
   {"多选题"}}</h1>
    <br>
    <div>
      <h3 style="text-align: center; ">{
   
   {question}}</h3>
      <br><br>
      <input type="checkbox" id="checkbox" value="错误" v-model="checkedOne">
      <label for="checkbox">A: 工信部 {
   
   {checkedOne}}</label><br><br>
      <input type="checkbox" id="checkbox" value="错误" v-model="checkedTwo">
      <label for="checkbox">B：公安部{
   
   {checkedTwo}}</label><br><br>
      <input type="checkbox" id="checkbox" value="正确" v-model="checkedThree">
      <label for="checkbox">C：国资委{
   
   {checkedThree}}</label><br><br>
      <input type="checkbox" id="checkbox" value="正确" v-model="checkedFour">
      <label for="checkbox">D：网信办{
   
   {checkedFour}}</label><br><br>
    </div>
  </div>

</div>
  <div style=" justify-content: center;width: 100%;height: 650px;background-color: deepskyblue;border: 2px red solid">
    <div style="height: 600px;width: 400px;background-color: aliceblue;margin-left: 550px">
      <br><br>
      <h1>{
   
   {"单选题"}}</h1>
      <br>
      <div >
        <h3 style="text-align: center; ">{
   
   {questionTwo}}</h3>
      </div>
      <div>
        <br><br>
        <input type="radio" id="codeA" value="A正确" v-model="picked">
        <label for="codeA">A: 公信部</label>
        <br><br><br>
        <input type="radio" id="codeB" value="B错误" v-model="picked">
        <label for="codeB">B: 公安部</label>
        <br><br><br>
        <input type="radio" id="codeC" value="C错误" v-model="picked">
        <label for="codeC">C: 国资委</label>
        <br><br><br>
        <input type="radio" id="codeD" value="D错误" v-model="picked">
        <label for="codeD">D: 网信办</label>
        <br><br>
        <span>选项: {
   
   { picked }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  name: 'TestPaper',

  data(){
    return{
      nextPage:">",
      lastPage:"<",
      question:" 某软件技术公司，主营业务为软件项目研发和交付，公司项目经理均为软件项目经理.为扩大发展，公司承接了一个技术改造项目，涉及到硬件的升级和更新及相关软件的开发和部署.关于新项目经理的人选，合适的是()\n ",
      questionTwo:"(  )依照《中华人民共和国数据安全法》和有关法律、行政法规的规定，负责统筹协调网络数据安全和相关监管工作。\n",
      selected:2,
      checkedOne:[],
      checkedTwo:[],
      checkedThree:[],
      checkedFour:[],
      picked : '',
      news:{
        title:"平衡计分卡(BAC)是一种基于战略管理的业绩考评工具。从()四个方面形成一套完整的绩效指标评价体系。\n",
        date: "2023年08月01日 15:51",
        position:"中国新闻网",
        content:""
      }
    }
  }
}

</script>



<style scoped>

</style>

总结

radio单选按钮和Checkbox复选框都是制作试卷很方便的好工具好方法，单选按钮还有的作用是让用户在一组选项中选择一个选项，并将其值作为表单数据传递给后端进行处理。它可以用于数据筛选、选项说明以及用户界面控制等方面。

我们在使用Checkbox制作试卷时，需要合理的使用多选和单选来表示不同类型的题目，并且在答题时需要考虑选项的排列和校验答案的逻辑。

希望这篇博客能给各位朋友们带来帮助，最后请来过的朋友们留下你们宝贵的三连以及关注，感谢你们！

《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作

文章目录

前言

radio是什么？

raido的作用体现在以下几个方面:

Checkbox是什么？

Checkbox的作用体现在以下几个方面：

一、制作试卷需要注意什么？

在运用Checkbox制作试卷时，需要注意以下几点：

二、单选题、多选题的实现方法

1.单选题的实现方法

2.多选题的实现方法

三、最终效果图

1.单选题效果图如下：

2.多选题效果图如下：

四、 所有代码如下

总结

猜你喜欢

四、所有代码如下