vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答)；

1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交;
前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量好,在此我就先写个假数据代替了,需要和后端商量好数据的格式
效果图如下:
答题前显示:

当我答题了以后,题号对应显示该题答题状况:

此时点击提交按钮,提示"未打完,请继续答卷":

完整答题提示:

基本已完成业务需求,另外如果需要点击题号滚动到选中题,只需要利用锚点就可以了,在此就不做介绍了
最后上代码,供大家参考:

<template><el-container><el-main><el-row><el-col :span="12"><div class="grid-content bg-purple"><div v-for="(test, index) in tests" :key="index"><p>{{index + 1}}.{{test.timu}}</p><el-checkbox-group v-if="test.type == '多选'" v-model="test.da"><!-- label绑定答案的值,可以绑定索引index,也可以绑定答案内容city --><el-checkboxv-for="(city,index) in test.xuanxiang":label="index":key="index">{{city}}</el-checkbox></el-checkbox-group><el-radio-group v-else-if="test.type == '单选'" v-model="test.da"><el-radiov-for="(city,index) in test.xuanxiang":label="index":key="index">{{city}}</el-radio></el-radio-group><div v-else><el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="test.da"></el-input></div></div></div><br /><!-- <div><router-link :to="{name:'first',params:{username:'小灰灰',code:1}}">跳转第1页</router-link><router-link :to="{name:'second',params:{username:'小灰灰',code:1}}">跳转第2页</router-link><router-link :to="{name:'third',params:{username:'小灰灰',code:1}}">跳转第3页</router-link></div>--></el-col><el-col :span="12"><div class="grid-content bg-purple-light"><h3>题号:</h3><div class="tihao"><!-- <span class="ti active">{{index + 1}}</span> --><div v-for="(test,index) in tests" :key="index"><span v-if="test.da.length == '0'" class="ti">{{index + 1}}<!-- {{key}} --></span><span v-else class="ti active">{{index + 1}}</span></div></div></div><div><el-button @click="submitCount" type="primary">提交考卷</el-button></div></el-col></el-row></el-main></el-container>
</template><script>
export default {name: "HelloWorld",data() {return {msg: "Welcome to Your Vue.js App",tests: [{timu: "我是第一题,多选题",type: "多选",xuanxiang: ["A哈哈", "B休息", "C方法", "D晋级"],// 答案存放数组da: []},{timu: "我是第二题,单选题",type: "单选",xuanxiang: ["AAA烦", "BBB我", "CCC人", "DDD去"],// 答案存放字符串da: ""},{timu: "我是第三题,问答题",type: "问答",xuanxiang: ["AA反打", "BB烦", "CC粉丝", "DD让人"],// 答案存放字符串da: ""}]};},created() {},updated() {console.log(tests);},methods: {submitCount() {console.log("提交试卷");// 是否答完let isComplete = true;this.tests.forEach((val,i) =>{if(val.da.length == 0){isComplete = false;return;}})if(isComplete){// 答题完整,可以提交,在这里进行提交数据操作alert('交卷成功!');}else{alert('未打完,请继续答卷!');}}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/* 题目*/
.tihao {display: flex;justify-content: space-around;
}
.ti {display: inline-block;width: 25px;height: 25px;line-height: 27px;border: 1px solid #bbb;color: #bbb;border-radius: 50%;text-align: center;
}
.active {background-color: blue;color: white;
}
</style>

希望文档能帮助到您,最后求个赞,谢谢~

vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答)；相关推荐

Vuex 入门前的小菜 - “Vue 中的简单状态共享机制实现”
PS:本文主要内容来自于官方文档,外加个人理解,作为个人学习记录. 1. 什么是状态共享机制? 首先说一下这里的"状态",状态主要是指 Vue 组件的 data 字段. 状态共享机 ...
axios在vue中的简单配置与使用
一.安装 1. 利用npm安装npm install axios --save 2. 利用bower安装bower install axios --save 3. 直接利用cdn引入<scrip ...
java语言中解释方式是什么意思,Java语言快速入门·简答T
1 面向对象与面向过程有什么区别? 面向对象编程:既然面向的是对象,那么强调的自然就是--对象,那么对象多了,就会抽象出相应的类(对象是类的实例化),所以 · 程序是由类组成 · 程序运行的时候去调用 ...
vue中简单的小插曲
我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({el:"#app",data ...
python CV 趣味项目答题卡识别
英文原文来自 Bubble sheet multiple choice scanner and test grader using OMR, Python and OpenCV 说到答题卡,满满的都是 ...
在vue中制作倒计时功能
在vue中制作简单的倒计时倒计时的核心是通过递归来时实现定时器所以在方法中使用setTimeout 就行了 <script src="https://cdn.jsdelivr.n ...
Vue中如何扩展⼀个组件
Vue中如何扩展⼀个组件按照逻辑扩展和内容扩展来列举: 逻辑扩展有:mixins.extends.composition api: 内容扩展有: slots: 一.Mixin 组件和组件之间有时候会 ...
vue核心面试题：Vue中相同逻辑如何抽离？
一.mixin 使用vue中的Vue.mixin,给组件每个生命周期.函数等混入一些公共的逻辑,另外混入对象的钩子将在组件自身钩子之前调用..mixin可以放在全局使用,也可以放在组件中使用. vue ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...

vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答)；

vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答)；相关推荐

最新文章

热门文章