vue 在线答题功能

在线答题功能

<!-- 考试 --><div class="examination"><ul v-for="(item,i) in examinationData" :key="i"><div>{{i+1}}、{{item.question}}</div><li v-for="(son,index) in item.answer" :key="index"><el-radiov-model="radio[i]":label="son.value":name="son.name"@change="getIputValue(i)"></el-radio></li></ul></div><!-- 考试 -->

data(){
return{
examinationData: [{id: "1",name: "one",question:"课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握",answer: [{ value: "A.Python" },{ value: "B.Vue" },{ value: "C.Php" },{ value: "D.Java" }]},{id: "1",name: "two",question:"课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握",answer: [{ value: "A.问题一" },{ value: "B.Vue2" },{ value: "C.Php2" },{ value: "D.Java2" }]},{id: "1",name: "three",question:"课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握",answer: [{ value: "A.问题二" },{ value: "B.Vue3" },{ value: "C.Php3" },{ value: "D.Java3" }]},{id: "1",name: "four",question:"课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握",answer: [{value:"A.课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握课堂管理讲师对课堂气氛的掌握"},{ value: "B.Vue4" },{ value: "C.Php4" },{ value: "D.Java4" }]},{id: "1",name: "five",question: "How about your in skills?",answer: [{ value: "A.问题四" },{ value: "B.Vue5" },{ value: "C.Php5" },{ value: "D.Java5" }]}],allRadio: [],//提交给后台的真题数据radio: []//单选真题答案
}}

方法getIputValue(index) {// console.log(index + 1 + "题" + this.radio);this.allRadio[index] = this.radio[index]; // 将数据存入提交给后台的数据中console.log(this.allRadio);// console.log(this.radio)}

vue 在线答题功能相关推荐

【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学
文章目录 vue分页功能实现一.直接上代码二.需要注意的事项 vue分页功能实现一.直接上代码 // 列表结构 // 重点:data="pageList" <el-ta ...
计算机毕设Python+Vue在线答题系统（程序+LW+部署）
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
vue拍照功能PC+手机需要的可以看一下
项目中需要用到拍照上传头像,从相册中选择, 相册中选择代码一搜一大堆就不讲了,今天主要讲一下在pc与手机上拉起摄像头拍照的功能我们用到的是2.X的框架,用到了<canvas>和<v ...
ruoyi vue 其功能介绍
1.介绍 RuoYi-Vue 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot.Spring Security.MyBatis.Jwt.Vue),内置模块如:部门管 ...
vue打印功能手持终端打印小票，电脑连接打印机打印预览
最近的项目有手持终端打印小票和电脑连接诶打印机打印信息方法有很多种的: 一. vue-print-nb 安装插件 1.安装插件 npm install vue-print-nb --save 2. ...
Vue购物车功能计算总价/全选/删除
要求功能实现初始页面功能1:删除点击删除操作后,整行可以被删除. 功能2:全选当所有商品都被勾选上是,全选按钮也勾上,当全选按钮勾上时,所有商品都被勾选上. 功能3:计算总价当输入商品数量 ...
基于Vshare插件实现vue分享功能
Vue中引入分享功能插件一度为快实现引入插件 npm config set strict-ssl false npm install vshare -S 页面实现 <template> ...
vue实现功能完整的购物商城，商品零食、电商通用商城
目录一.项目结构 1.项目截图 2.项目简介 3.项目布局二.首页 1.效果图 2.源码三.商品详情 1.效果图 2.源码四.分类 1.效果图五.购物车.提交订单 1.效果图六.个人中心 ...
mui与vue结合功能网址
Vue.js的组件和框架PC与移动 iView elementUI MintUI elementUI PC官网 http://element.eleme.io/ MintUI 移动端 http://m ...
Leaflet中实现在popup中展示Vue组件功能
背景在做GIS地图功能时候有一个需求,每个点的popup中展示数据内容,一般情况下以拼字符串的形式往popup中拼HTML标签实现数据内容的展示,但是这样太麻烦也不容易维护.就想着能不能实现让pop ...

vue 在线答题功能

vue 在线答题功能相关推荐

最新文章

热门文章