十分钟手把手教你设计简单易用的组件级考试题（单选、多选、填空、图片），建议收藏

最新推荐文章于 2024-04-28 01:30:48 发布
最新推荐文章于 2024-04-28 01:30:48 发布
阅读量3.5k 收藏 6
点赞数 5
分类专栏： vue入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/codeex/article/details/117937382
版权
本文详细介绍了如何使用Vue设计组件化的考试题型，包括单选题、多选题、填空题和图片题。通过创建单独的组件文件，如SingleItem、MultiItem、TextItem和ImageSingleItem，并利用Vue的v-model和事件处理，实现了组件间的双向绑定和输入交互。文章提供了具体的模板设计、组件代码实现和父组件的构建方法，适合初学者学习。
摘要由CSDN通过智能技术生成

对于学生党来说，最常见的莫过于试卷考试题，调查问卷测试题等等，有没有一款论文是管理考试题库的？对于新手刚入门的同学来说，仔细看本文，保证你看完后可以自己手撸代码。

1、试卷题

试卷题型有很多种，常见的有单选、多选、填空、图片题等等，例如下图的问卷调查题。
在这里插入图片描述

2 题型组件定义

这么多题型，其界面和操作形式各有异同，因此我们可以简单的按照题型进行设计组件。

如下组织形式，我们先建立WQuestionItem 文件夹，然后添加各型号的题型组件：

  • ImageSingleItem ： 图片单选题
  • MultiItem： 多选题
  • SingleItem： 单选题
  • TextItem： 填空题
  • NumItem： 数字题
  • …

了解本专栏 订阅专栏 解锁全文 超级会员免费看
webmote
关注
专栏目录
订阅专栏
航拍大师手把手教你电影级航拍视频课程下载整理.zip
08-21
在本课程中，“航拍大师手把手教你电影级航拍视频”旨在为摄影爱好者和专业影视制作人员提供一套详尽的教程，通过学习这套课程，您可以掌握如何利用无人机进行电影级别的航拍技巧。课程涵盖了从基础操作到高级拍摄...
小练习：组件的使用3（组件之间切换的练习）
weixin_43169510的博客
04-16 171
comp comp
原生js/jq封装的一款阅卷系统的切图插件
峰会路转的博客
11-19 780
工具的目的是，在模拟在canvas上面画图制作。主要是学校的在线阅卷，对试题进行切割，获取到所选的坐标点，长宽的数据，框选的部分导出为图片，传递给后台，进行数据文本的识别，自动填充等业务需要 待续… ...
【vue填空题功能双版本】js简单实现填空题功能，可勾选并输入的填空功能，完形填空，可自由控制填空位置，段落中可加多个填空，可以保存回显数据【详细注释】
seeeeeeeeeee的博客
01-02 2145
在配置的地方输入内容比如：啊啊{1}啊啊{2}注意上面这个文字后面的{}，这就代表了输入框。我们拿到这个数据后，通过正则匹配到对应花括号的位置，然后把他替换成一个输入框然后输入框输入的内容在通过匹配花括号的位置来替换成答案，最终合并出了一个我们需要的数据回显也是根据括号内的数字来匹配输入框的dom实现的。具体看下面代码的注释。
Vue练习题（带解析）
qq_60245590的博客
06-11 9618
在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。但是它并不包含父作用域中的属性。C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
Vue 单选题组件实现
前端程序猿的博客
06-13 1057
当某一个选项被选中时，该函数会将当前选中的选项 id 绑定到 selectedOptionId 变量上，并将选项列表中的 isRight 属性进行更新，确保只有一个选项被设置为正确答案。同时通过 v-model 将选项列表中被选中的选项的 id 绑定到 selectedOptionId 变量上，实现对选中选项的管理。最后，组件在 mounted 钩子函数中初始化选中的选项 ID 为默认选中项的 ID，如果找不到正确选项则取第一个选项的 ID 作为默认选中项。至此，我们已经完成了 Vue 单选题组件的实现。
HR必备：手把手教你设计薪酬体系.xlsx
09-04
HR必备：手把手教你设计薪酬体系 1、职务等级确定 "职务等级是更具每个职务的基本目的、承担职责、所需条件等内容，参考职位价值评估系统确定每个职务在企业内部组织结构中的相对位置，职务等级是公司...
手把手教你学AVR单片机C程序设计附件_手把手教你学AVR单片机C程序设计附件_
10-01
本教程“手把手教你学AVR单片机C程序设计”旨在帮助初学者掌握AVR单片机的基础知识和编程技巧，使用C语言进行开发，这是一门实践性强、理论与应用相结合的课程。 首先，了解AVR单片机的基本结构是至关重要的。AVR...
单选，多选，填空问卷调查实例
08-09
一个包含单选，多选，填空的问卷调查小项目
vue经典面试题，帮你准备未来的面试《一》
零小唬的博客
03-31 604
vue经典面试题，帮你准备未来的面试《一》
vue+element实现单选多选 答题的打分demo(从0-1全过程)
benlalagang的博客
07-22 4128
答题: vue+element答题demo 包含单选 多选 判断、打分页面
vue-quill-editor自定义组件来实现填空题下标
weixin_70426591的博客
03-01 314
/data中绑定符文便编辑器菜单按钮。
MySQL创建触发器时出现Not allowed to return a result set from a trigger
小异常的博客
10-11 3600
我先来描述一下问题，我在创建MySQL触发器时出现报错。报错信息：[Err] 1415 - Not allowed to return a result set from a trigger。
2024年Vue最常见的面试题以及填空题（面试必问）
最新发布
2401_84433769的博客
04-28 658
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
多选题（公共组件）（原生）
qq_41979331的博客
06-23 157
子组件 html <div class="commentRadio"> <div v-for="(con,i) in Obj.tmList" :key="i+'r'" class="inputClass"> <input :id="con.id" type="checkbox" :value="con.id" v-model="checklist"
vue 模拟填空题方格输入（一个文字一个方格）
呱呱的博客
12-27 3101
前言：用于APP、H5的答题功能。 题目的数据 currentQus:{ questionName: "举头望（），低头思（）。" //标题 rightKey: "明月,故乡", //答案 userKey:"" //用户输入的答案 } 首先根据标题和答案，处理好格子数，以及每一个方格所在位置，绑定到model，用于页面渲染 /* 处理填空题标题 */ handleBlankTile(currentQus) { const { questionName, rig
（Vue）Vue课后题
热门推荐
m0_67390773的博客
03-10 1万+
Vue课后题 文章目录 Vue课后题 第1章 Vue.js 基础入门 一、填空题 二、判断题 三、选择题 四、简答题 五、编程题 第2章 Vue 开发基础（上） 一、填空题 二、判断题 三、选择题 四、简答题 五、编程题 第3章 Vue 开发基础（下） 一、填空题 二、判断题 三、选择题 四、简答题 五、编程题 第4章 过渡和动画 一、填空题 二、判断题 三、选择题 四、简答题 五、编程题 第5章 Vue 路由 一、填空题 二、判断题 三、选择题 四、简答题 五、编
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

webmote

如果能帮到你，请支持下博主

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值