vue+element 实现 试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）

文章目录

  • vue+element 实现 试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
  • 难点：
  • 一、后端返回数据（）
  • 方法一
    • 页面
    • 1.html
    • 2.js - 答题部分
    • 3.js - 回显部分
  • 方法二：
    • 1.html
    • 2.js - 答题部分
    • 3.js - 回显部分
  • 总结
  • 方法一优点：可以使用表单的任何属性，使用方便
  • 方法一缺点：数据结构有点麻烦，然后提交函数最好封装一下
  • 方法二优点：没有报错，不用搞那么多乱七八糟的函数，看着省心，用着及其方便
  • 方法二缺点：表单验证什么的.......你懂得

难点：

  1. 如何循环不同类型的题
  2. 如何记录点击的是哪道题，并且分清楚他是单选还是多选
  3. 单选还好，多选的话不能出现点了一道题，其他题的答案都是点击的这个选项
  4. 回显的时候如何再把值赋上去
  5. 附加功能：设置开始时间和结束时间，未到时间不可答题（后端做判断），到时间后自动提交

要和后端商量，把所有时间搞成秒，这样好判断时间到没到，分钟的话太大，毫秒的话，不可能那么精确，而且脸黑的话，两个毫秒值永远不可能相等

ps： 一定要看注释

一、后端返回数据（）

{"returnObject": {"count": 380,"list": [{"createTime": 1597030865000,"delFlag": "0","id": 285,"num": 0,"questionType": "1","sjIntroduction": "计算机基本知识","stAnalysis": "JEIIXJIEJXIJIEXIJEIX","stAnswer": "B","stContent": "多数轿车更换发动机机油的周期里程为________km。","stScore": 10,"stSelecta": "2000--3000","stSelectb": "5000--8000","stSelectc": "10000--12000","stSelectd": "14000--16000","stType": "1"},{"createTime": 1597030865000,"delFlag": "0","id": 286,"num": 0,"questionType": "1","sjIntroduction": "计算机基本知识","stAnalysis": "JEIIXJIEJXIJIEXIJEIX","stAnswer": "B","stContent": "关于镶套修理法，下面说法不正确的是（  ）","stScore": 10,"stSelecta": "镶套后改变了零件的尺寸","stSelectb": "镶套材料应尽量与基体一致","stSelectc": "镶套采用了过盈配合","stSelectd": "配合表面要求加工精度较高","stType": "1"},{"createTime": 1608101282000,"delFlag": "0","id": 452,"num": 0,"questionType": "3","sjIntroduction": "计算机基本知识","stAnalysis": "无","stAnswer": "A,B,C","stContent": "对磁盘与驱动器中，叙述正确的有","stCteater": "1","stScore": 10,"stSelecta": "密度","stSelectb": "扇区","stSelectc": "磁道","stSelectd": "光标本","stSelecte": "孔口","stSelectf": "","stType": "1"},{"createTime": 1608099445000,"delFlag": "0","id": 443,"num": 0,"questionType": "3","sjIntroduction": "计算机基本知识","stAnalysis": "无","stAnswer": "A,C,B","stContent": "计算机的主要特点是","stCteater": "1","stScore": 10,"stSelecta": "运算速度快","stSelectb": "精度高","stSelectc": "存储记忆","stSelectd": "自动编程","stSelecte": "用十进制计数","stSelectf": "","stType": "1"},{"createTime": 1606957884000,"delFlag": "0","id": 372,"num": 0,"questionType": "2","sjIntroduction": "计算机基本知识","stAnalysis": "JEIIXJIEJXIJIEXIJEIX","stAnswer": "错","stContent": "int是引用数据类型","stScore": 10,"stSelecta": "对","stSelectb": "错","stType": "1"},{"createTime": 1606957884000,"delFlag": "0","id": 373,"num": 0,"questionType": "2","sjIntroduction": "计算机基本知识","stAnalysis": "JEIIXJIEJXIJIEXIJEIX","stAnswer": "错","stContent": "string是引用数据类型","stScore": 10,"stSelecta": "对","stSelectb": "错","stType": "1"},{"createTime": 1606957884000,"delFlag": "0","id": 376,"num": 0,"questionType": "4","sjIntroduction": "计算机基本知识","stAnalysis": "JEIIXJIEJXIJIEXIJEIX","stAnswer": "数组和链表的区别","stContent": "ArrayList和LinkedList的区别","stScore": 10,"stType": "1"},{"createTime": 1545893669000,"delFlag": "0","id": 44,"num": 0,"questionType": "4","sjIntroduction": "计算机基本知识","stAnalysis": "JEIIXJIEJXIJIEXIJEIX","stAnswer": "数组和链表的区别","stContent": "1ArrayList和LinkedList的区别","stScore": 10,"stSelecta": "","stSelectb": "","stSelectc": "","stSelectd": "","stType": "3"}]},"code": "200","message": "成功"
}

方法一

页面

1.html

 <!-- 页面标题 --><div class="VSTD_box" v-if="question.length !== 0"><h1 style="margin-bottom: 40px; text-align: center">{{ iow.sjIntroduction }}</h1><!-- 题的表单 --><!-- 绑定表单的数据 ruleForm --><!-- 绑定题的数组 ruleForm.resource[index] -->data{return{ruleForm: {resource: [],},}}<el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><!-- 循环后端给你的所有题 --><divclass="VSTD_box_item"v-for="(item, index) in question":key="item.id"><!-- 1 单选 --><!-- 2 判断 --><!-- 3 多选 --><!-- 4 简答 --><div class="VSTD_box_item_title"><!-- 题目的信息 --><p style="font-weight: 700">第{{ index + 1 }}题：{{ item.stContent}}<span>（{{ item.stScore }}分）</span><span v-if="item.questionType == 1">（单选）</span><span v-if="item.questionType == 2">（判断）</span><span v-if="item.questionType == 3">（多选）</span><span v-if="item.questionType == 4">（简答）</span></p></div><!-- 如果questionType 等于1 那么他是单选题 --><!-- 题目绑定的值是 ruleForm.resource[index]  --><div v-if="item.questionType == 1" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><el-radio-group v-model="ruleForm.resource[index]"><el-radio label="A">{{ item.stSelecta }}</el-radio><el-radio label="B">{{ item.stSelectb }}</el-radio><el-radio label="C">{{ item.stSelectc }}</el-radio><el-radio label="D">{{ item.stSelectd }}</el-radio></el-radio-group></el-form-item></div><!-- 如果questionType 等于2 那么他是判断题 --><!-- 题目绑定的值是 ruleForm.resource[index]  --><div v-if="item.questionType == 2" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><el-radio-group v-model="ruleForm.resource[index]"><el-radio label="对">{{ item.stSelecta }}</el-radio><el-radio label="错">{{ item.stSelectb }}</el-radio></el-radio-group></el-form-item></div><!-- 如果questionType 等于3 那么他是多选题 --><!-- 题目绑定的值是 ruleForm.resource[index]  --><div v-if="item.questionType == 3" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><el-checkbox-group@input="change($event)"v-model="ruleForm.resource[index]"><el-checkbox label="A">{{ item.stSelecta }}</el-checkbox><el-checkbox label="B">{{ item.stSelectb }}</el-checkbox><el-checkbox label="C">{{ item.stSelectc }}</el-checkbox><el-checkbox label="D">{{ item.stSelectd }}</el-checkbox><el-checkbox label="E">{{ item.stSelecte }}</el-checkbox><!-- <el-checkbox label="F">{{ item.stSelectf }}</el-checkbox> --></el-checkbox-group></el-form-item></div><!-- 如果questionType 等于4 那么他是简答题 --><!-- 题目绑定的值是 ruleForm.resource[index]  --><div v-if="item.questionType == 4" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><!-- <el-form-item label="活动形式"> --><el-inputtype="textarea"v-model="ruleForm.resource[index]"></el-input></el-form-item></div></div><!-- 提交函数  --><el-form-item style="text-align: center"><el-button type="primary" @click="submitForm('ruleForm', false)">提交</el-button></el-form-item></el-form></div><!-- 如果没题就提示没题 --><div v-else><div class="none" style="margin-left: 0px"><div class="none_img"></div><h3>暂无试题</h3></div></div><!-- 表单提交后显示分数的弹窗 --><el-dialogtitle="您此次评分为":visible.sync="dialogVisible"width="30%"@close="handleClose"><span style="font-size: 60px; color: #3e80f8">{{ score }}分</span><span slot="footer" class="dialog-footer"><el-button @click="back()">返回</el-button><el-button type="primary" @click="go">我的测评</el-button></span></el-dialog>

2.js - 答题部分


//数据定义data() {return {score: 0,                     //表单提交后，后端返回的总分id: '',                     //获取路由的 query，试卷的idiow: '',                        //返回的题目信息dialogVisible: false,          //弹窗djStarttime: '',              //获取当前时间question: [],                   //保存后端返回题的数组，页面上需要用它来循环显示每一道题ruleForm: {resource: [],                //每一道题的值},DSQ: null,                    //定时器，到时间自动提交DSQTime: 0,                 //后端返回的结束时间 questionArrText: [],            //答题保存的数组}},逻辑created() {var djStarttime = new Date()var year = djStarttime.getFullYear()var month = (djStarttime.getMonth() + 1).toString()var day = djStarttime.getDate().toString()var hour = djStarttime.getHours().toString()var minute = djStarttime.getMinutes().toString()var second = djStarttime.getSeconds().toString()if (month.length == 1) {month = '0' + month}if (day.length == 1) {day = '0' + day}if (hour.length == 1) {hour = '0' + hour}if (minute.length == 1) {minute = '0' + minute}if (second.length == 1) {second = '0' + second}this.djStarttime =year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + secondthis.id = this.$route.query.id//获取当前系统时间，传给后端，用来判断他用了多长时间//console.log(this.dateTime)this.init()        //初始化函数},//监听定时器，如果 当前系统时间的秒值等于或大于后端给定的时间，那么就自动提交题目watch: {DSQTime: function (val, oldVal) {console.log(this.DSQTime)console.log(this.DSQEndTime)if (this.DSQTime == this.DSQEndTime) {clearInterval(this.DSQ)this.submitForm('ruleForm', true)}},},methods: {//给多选框用，否则会出现一个bug，就是先点一下多选框，然后没反应，//然后点一下按钮或者点击下拉框后，这个多选框就高亮了change(e) {this.$forceUpdate()},//关闭弹窗函数handleClose(done) {this.dialogVisible = false},//跳页面的函数go() {this.$router.push({ path: '/ME' })},//返回上一页back() {this.$router.go(-1)},//初始化函数init() {//定时器，获取当前系统时间（毫秒），然后转化为秒this.DSQ = setInterval(() => {this.DSQTime = parseInt(Date.now() / 1000)}, 1000)//封装的接口，把试卷id传进去，返回所有题msgApi.questionsList(this.id).then((res) => {if (res.data.code == 200) {this.question = res.data.returnObject.list            //页面循环的题for (let i = 0; i < this.question.length; i++) {//如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串if (this.question[i].questionType == 3) {this.ruleForm.resource[i] = []}else{this.ruleForm.resource[i] = ''}}this.questionArrText = res.data.returnObject.list   //重新赋值，用来判断他是否全部答完this.iow = res.data.returnObject.name             //题的名字this.DSQEndTime = parseInt(this.iow.endTime / 1000)  //后端返回的时间（毫秒）转化为秒}}).catch((err) => {})},//提交函数//ifs 判断是否是用户自己点击的提交按钮，如果不是，那么就是到时间了，系统自动提交的submitForm(formName, ifs) {if (ifs) {//系统自动提交的话var arr = []                                          //最后给后端的是一个json串var that = thisvar b = this.ruleForm.resource.notempty()//获取他已经答过的题for (var i = 0; i < this.questionArrText.length; i++) {var json = {}                                            //最后给后端的是一个json串json.id = that.questionArrText[i].id                   //json的id：题id//如果是数组（也就是多选题），那么就用join把他换为字符串if (that.ruleForm.resource[i] instanceof Array) {json.text = that.ruleForm.resource[i].join()} else {json.text = that.ruleForm.resource[i]}if (json.text == undefined) {                        //如果这个题没答，那么就把他重置为空串，而不是给后端一个 undefined 字符串json.text = ''}json.isJD = this.questionArrText[i].questionType    //给后端题的类型arr.push(json)                                 //一个一个push进去}var obj = {                                           //传的采纳数djPaperid: this.id,djStarttime: this.djStarttime,djAnswers: JSON.stringify(arr),}msgApi.answers(obj)                                     //请求的接口.then((res) => {if (res.data.code == 200) {//console.log(res)this.dialogVisible = truethis.score = res.data.returnObject}}).catch((err) => {})} else {this.$refs[formName].validate((valid) => {         //如果是用户自己点的if (valid) {var arr = []var that = thisvar b = this.ruleForm.resource.notempty()if (b.length !== this.questionArrText.length) { //要是有未答的题目走ifthis.$confirm('检测到您有未答完的题目，，是否确认提交试卷？','确认信息',{distinguishCancelAndClose: true,confirmButtonText: '确认',cancelButtonText: '取消',}).then(() => {         //逻辑和刚刚的一样，for (var i = 0; i < this.questionArrText.length; i++) {var json = {}json.id = that.questionArrText[i].idif (that.ruleForm.resource[i] instanceof Array) {json.text = that.ruleForm.resource[i].join()} else {json.text = that.ruleForm.resource[i]}if (json.text == undefined) {json.text = ''}json.isJD = this.questionArrText[i].questionTypearr.push(json)}var obj = {djPaperid: this.id,djStarttime: this.djStarttime,djAnswers: JSON.stringify(arr),}msgApi.answers(obj).then((res) => {if (res.data.code == 200) {//console.log(res)this.dialogVisible = truethis.score = res.data.returnObject}}).catch((err) => {})}).catch((action) => {})} else {                                                  //如果都答了，就走else  （其实这个感觉没必要，不过就这吧）for (var i = 0; i < this.questionArrText.length; i++) {var json = {}json.id = that.questionArrText[i].idif (that.ruleForm.resource[i] instanceof Array) {json.text = that.ruleForm.resource[i].join()} else {json.text = that.ruleForm.resource[i]}json.isJD = this.questionArrText[i].questionTypearr.push(json)}var obj = {djPaperid: this.id,djStarttime: this.djStarttime,djAnswers: JSON.stringify(arr),}msgApi.answers(obj).then((res) => {if (res.data.code == 200) {//console.log(res)this.dialogVisible = truethis.score = res.data.returnObject// this.$message.success(res.data.returnObject)}}).catch((err) => {})}} else {//console.log('error submit!!')return false}})}},resetForm(formName) {this.$refs[formName].resetFields()},},

3.js - 回显部分

题目方面和之前的html一样，就是多了个disabled属性，
然后让后端把你给后端的json串拿到手之后，你再去获取到，做一个回显（后端工具人上线）

就发题目部分吧，其他的没什么用

<divclass="VSTD_box_item"v-for="(item, index) in question":key="item.id"><div class="VSTD_box_item_title"><p>第{{ index + 1 }}题：{{ item.stContent}}<span>（{{ item.stScore }}分）</span></p></div><div v-if="item.questionType == 1" class="VSTD_box_item_select"><el-form-item label="" prop="resource" style="margin-bottom: 0px"><!-- 注意，这里回显的时候要 加上一个类型  --><!-- 单选，简答，判断用这个 ruleForm.resource[index].text   --><!-- 多选用这个 ruleForm.resource[index].textarray--><!-- 因为数据类型不一样，所以要区分  --><el-radio-group v-model="ruleForm.resource[index].text"><el-radio disabled label="A">{{ item.stSelecta }}</el-radio><el-radio disabled label="B">{{ item.stSelectb }}</el-radio><el-radio disabled label="C">{{ item.stSelectc }}</el-radio><el-radio disabled label="D">{{ item.stSelectd }}</el-radio></el-radio-group></el-form-item><span style="margin-left: 100px"><div class="msgss"><div>正确答案：<span class="right">{{ item.stAnswer }}</span></div><div>考生答案：<span class="error">{{ ruleForm.resource[index].text }}</span></div></div></span></div><div v-if="item.questionType == 2" class="VSTD_box_item_select"><el-form-item label="" prop="resource" style="margin-bottom: 0px"><el-radio-group v-model="ruleForm.resource[index].text"><el-radio disabled label="对">{{ item.stSelecta }}</el-radio><el-radio disabled label="错">{{ item.stSelectb }}</el-radio></el-radio-group></el-form-item><span style="margin-left: 100px"><div class="msgss"><div>正确答案：<span class="right">{{ item.stAnswer }}</span></div><div>考生答案：<span class="error">{{ ruleForm.resource[index].text }}</span></div></div></span></div><div v-if="item.questionType == 3" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><el-checkbox-group@input="change($event)"v-model="ruleForm.resource[index].textarray"style="margin-bottom: 0px"><el-checkbox disabled label="A">{{item.stSelecta}}</el-checkbox><el-checkbox disabled label="B">{{item.stSelectb}}</el-checkbox><el-checkbox disabled label="C">{{item.stSelectc}}</el-checkbox><el-checkbox disabled label="D">{{item.stSelectd}}</el-checkbox><el-checkbox disabled label="E">{{item.stSelecte}}</el-checkbox></el-checkbox-group></el-form-item><span style="margin-left: 100px"><div class="msgss"><div>正确答案：<span class="right">{{ item.stAnswer }}</span></div><div>考生答案：<span class="error">{{ ruleForm.resource[index].text }}</span></div></div></span></div><div v-if="item.questionType == 4" class="VSTD_box_item_select"><el-form-item label="" prop="resource" style="margin-bottom: 0px"><el-inputdisabledtype="textarea"v-model="ruleForm.resource[index].text"></el-input></el-form-item><span style="margin-left: 100px"><div class="msgss"><div>正确答案：<span class="right">{{ item.stAnswer }}</span></div><div>考生答案：<span class="error">{{ ruleForm.resource[index].text }}</span></div></div></span></div></div>data() {                        //data还是这个return {score: 0,id: '',dialogVisible: false,djStarttime: '',question: [],ruleForm: {resource: [],},iow: '',allanswer: [],questionArr: [],rules: {resource: [// { required: true, message: '请输入活动名称', trigger: 'blur' }],},}},//init 函数有点不一样，先请求题目接口，然后请求答案接口init() {//题目接口msgApi.questionsList_look(this.id).then((res) => {if (res.data.code == 200) {this.question = res.data.returnObject.listfor (let i = 0; i < this.question.length; i++) {this.questionArr.push(this.question[i].id)}this.iow = res.data.returnObject.name}}).catch((err) => {})msgApi.MyAnswer(this.id).then((res) => {if (res.data.code == 200) {//console.log(res.data.returnObject)this.allanswer = res.data.returnObjectthis.answer = res.data.returnObject.contArrayconsole.log(this.answer)this.ruleForm.resource = this.answer}}).catch((err) => {})},

方法二：

ps ：就是在后端返回题的时候，直接在返回的数据中创建一个保存答案的键值对，然后页面在v-model的时候，把这个创建的值再加上去就行了，止于表单验证什么的…估计得动态加了

1.html

 <!-- 页面标题 --><div class="VSTD_box" v-if="question.length !== 0"><h1 style="margin-bottom: 40px; text-align: center">{{ iow.sjIntroduction }}</h1><el-formref="ruleForm"label-width="100px"class="demo-ruleForm"><!-- 循环后端给你的所有题 --><divclass="VSTD_box_item"v-for="(item, index) in question":key="item.id"><!-- 1 单选 --><!-- 2 判断 --><!-- 3 多选 --><!-- 4 简答 --><div class="VSTD_box_item_title"><!-- 题目的信息 --><p style="font-weight: 700">第{{ index + 1 }}题：{{ item.stContent}}<span>（{{ item.stScore }}分）</span><span v-if="item.questionType == 1">（单选）</span><span v-if="item.questionType == 2">（判断）</span><span v-if="item.questionType == 3">（多选）</span><span v-if="item.questionType == 4">（简答）</span></p></div><!-- 如果questionType 等于1 那么他是单选题 --><!-- 题目绑定的值是 每一项的 item.resource  --><div v-if="item.questionType == 1" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><el-radio-group v-model="item.resource"><el-radio label="A">{{ item.stSelecta }}</el-radio><el-radio label="B">{{ item.stSelectb }}</el-radio><el-radio label="C">{{ item.stSelectc }}</el-radio><el-radio label="D">{{ item.stSelectd }}</el-radio></el-radio-group></el-form-item></div><!-- 如果questionType 等于2 那么他是判断题 --><!-- 题目绑定的值是 每一项的 item.resource  --><div v-if="item.questionType == 2" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><el-radio-group v-model="item.resource"><el-radio label="对">{{ item.stSelecta }}</el-radio><el-radio label="错">{{ item.stSelectb }}</el-radio></el-radio-group></el-form-item></div><!-- 如果questionType 等于3 那么他是多选题 --><!-- 题目绑定的值是  每一项的 item.resource  --><div v-if="item.questionType == 3" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><el-checkbox-group@input="change($event)"v-model="item.resource"><el-checkbox label="A">{{ item.stSelecta }}</el-checkbox><el-checkbox label="B">{{ item.stSelectb }}</el-checkbox><el-checkbox label="C">{{ item.stSelectc }}</el-checkbox><el-checkbox label="D">{{ item.stSelectd }}</el-checkbox><el-checkbox label="E">{{ item.stSelecte }}</el-checkbox><!-- <el-checkbox label="F">{{ item.stSelectf }}</el-checkbox> --></el-checkbox-group></el-form-item></div><!-- 如果questionType 等于4 那么他是简答题 --><!-- 题目绑定的值是  每一项的 item.resource  --><div v-if="item.questionType == 4" class="VSTD_box_item_select"><el-form-item label="" prop="resource"><!-- <el-form-item label="活动形式"> --><el-inputtype="textarea"v-model="item.resource"></el-input></el-form-item></div></div><!-- 提交函数  --><el-form-item style="text-align: center"><el-button type="primary" @click="submitForm()">提交</el-button></el-form-item></el-form></div><!-- 如果没题就提示没题 --><div v-else><div class="none" style="margin-left: 0px"><div class="none_img"></div><h3>暂无试题</h3></div></div>

2.js - 答题部分


//数据定义data() {return {question: [],                 //保存后端返回题的数组，页面上需要用它来循环显示每一道题}},逻辑created() {this.init()     //初始化函数},methods: {//给多选框用，否则会出现一个bug，就是先点一下多选框，然后没反应，//然后点一下按钮或者点击下拉框后，这个多选框就高亮了//初始化函数init() {msgApi.questionsList(this.id).then((res) => {if (res.data.code == 200) {var json = res.data.returnObject.listfor (let i = 0; i < json.length; i++) {//如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串if (json[i].questionType == 3) {json[i].resource = []      //直接给每一项加一个resource属性，因为res.data他是一个对象，所以可以任意给他添加新的键值对}else{json[i].resource = ''}}}this.question = json          //页面循环的题}).catch((err) => {})},

3.js - 回显部分

后端也是会给你返回这样的数据

{"returnObject": {"count": 380,"list": [{"createTime": 1597030865000,"delFlag": "0","id": 285,"num": 0,"questionType": "1","sjIntroduction": "计算机基本知识","stAnalysis": "JEIIXJIEJXIJIEXIJEIX","stAnswer": "B","stContent": "多数轿车更换发动机机油的周期里程为________km。","stScore": 10,"stSelecta": "2000--3000","stSelectb": "5000--8000","stSelectc": "10000--12000","stSelectd": "14000--16000","stType": "1""用户选择的答案": "A"      //会给你个这个字段}]},"code": "200","message": "成功"
}

就是多了一个字段，然后你再把这个字段赋值给item.resource 即可

总结

其他不难，难的是如何使用v-model绑定数据，然后如何让他点哪个哪个高亮

方法一优点：可以使用表单的任何属性，使用方便

方法一缺点：数据结构有点麻烦，然后提交函数最好封装一下

方法二优点：没有报错，不用搞那么多乱七八糟的函数，看着省心，用着及其方便

方法二缺点：表单验证什么的…你懂得

vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）相关推荐

  1. Vue+Element动态生成新表单并添加验证

    Vue+Element动态生成新表单并添加验证 首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后 官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...

  2. 基于javaweb的在线考试系统(单选,多选,判断,填空,简答题)(java+springboot+ssm+mysql+html)

    基于javaweb的在线考试系统(单选,多选,判断,填空,简答题)(java+springboot+ssm+mysql+html) 运行环境 Java≥8.MySQL≥5.7 开发工具 eclipse ...

  3. 2019上半年软件设计师 下午真题-简答题及免费答案（一）

    2019上半年软件设计师 下午真题-简答题及免费答案(一) 试题一(15分) 阅读下列说明和图,回答问题1至4,将解答填入答题纸的对应栏内. [说明] 某学校欲开发一学生跟踪系统,以便更自动化.更全面 ...

  4. Java项目:在线考试系统(单选,多选,判断,填空,简答题)(java+Springboot+ssm+mysql+html+maven)

    源码获取:博客首页 "资源" 里下载! 功能: 学生信息 班级 专业 学号 姓名  在线考试 成绩查询 个人信息 密码修改 教师管理 教师编号 姓名  所教科目  题库管理  单选 ...

  5. python实现随机抽取答题_问卷星可以随机抽取题库答题吗

    问卷星可以随机抽取题库答题吗 简介 自动填写问卷并提交 , 然后自动刷新继续填写 , 适用于问卷星 , 欢迎 Star 上个月开源了一个 Python 项目(登上过 GitHub 最流行的 中文语言 ...

  6. linux的基础简答题,Linux认证考试试题及答案「简答题」

    Linux认证考试试题及答案「简答题」 1.论述实时信号.非实时信号.可靠信号.不可靠信号四个概念. 答:实时信号目前未用,非实时信号编号1-31.0表示空信号 1分 非实时信号没有排队机制,可能丢失 ...

  7. 计算机二级java答题演示_计算机二级office练习试题 | 简答题篇大放送啦

    小编为所收集到的资料 大家要认真阅读并做题哦! 8[简答题]请在[答题]菜单下选择[进入考生文件夹]命令,并按照题目要求完成下面的操作. 注意:以下的文件必须都保存在考生文件夹下. 某学校初中二年级五 ...

  8. vue element form ref 重置表单

    <template><!--model绑定整个form对象的的数据--><!--通过ref属性获得表单对象,调用resetFieleds方法重置表单的字段-->&l ...

  9. 前端学习（3084）：vue+element今日头条管理-表单数据绑定2

最新文章

  1. mysql释放练级_面试官：谈谈Mysql事务隔离级别？
  2. java接监控摄像头接口_离奇！深夜隧道内，12个摄像头突然一个接一个“瞎”了，监控员吓懵了...
  3. 可视化计算java_Java可视化计算器
  4. 训练日志 2018.8.29
  5. 基于python的空域变换
  6. PHPExcel 表格 行 合并
  7. 如何删除Eclipse中的中文包，让中文Eclipse显示英文
  8. 盘点程序员必备的免费资源网站
  9. 中国美女黑客攻击4G网络？详解
  10. CSDN为什么要办一场面向开发者的云计算大会？
  11. C语言micstring函数,micSendString函数使用方法
  12. es - elasticsearch search - DSL - decay functions
  13. AI Now：比人脸识别更可怕的黑科技---情绪识别
  14. Nachos project1 领悟
  15. 测试基础---软件开发生命周期
  16. 【DP_区间DP专辑】
  17. 升级Mac内置的vim
  18. 华为云添加HSS云主机agent无法安装提示已存在问题处理
  19. python显示磁共振图像（MRI）（pydicom）
  20. 关于GPS模块的一些注意点，包括区分天线。

热门文章

  1. 故障智能诊断读书笔记（一）
  2. 小程序的支付的完整代码(php)
  3. Uber明年在中国将继续补贴，并大举进军100个城市！
  4. 什么是前端的核心竞争力
  5. 技术人才的核心竞争力有哪些？
  6. PYTHON脚本将excl表格中的科学计数法转变为普通数值
  7. 【图像处理】图形图像中术语
  8. 英语口语练习十七之I can't figure out... (我搞不懂……)的用法
  9. 浅写策略模式，及map、枚举结合小例子
  10. GPU异构计算基础知识