效果图:

项目要求:

1:实现单选题和多选题区分 (这个根据后端传来的数据判断 )

2 单选选中效果 和  多选选中效果(利用input 和label )

3.答题成功与失败 分单选和多选的情况   ;  单选的时候(将选中的答案与正确答案比较,如果相等则正确,反之错误)多选的时候(利用map遍历数组,在利用arr.includes(item) , arr 是遍历的正确答案数组    item 是map 遍历的选中的答案数组     如果item 在 arr 中   (例如:A 在【A,B】中) 则arr.includes(item)返回true  拿一个计数器计数 ,但答对的数量与正确答案的数量相等时 , 则回答正确 ,反之错误)

注意事项:

首先input 和 label     input 有 type = radio 和 checkbox 来切换单选和多选;

利用input 的 v-model 可以将 选中的值 ,双向绑定在数组picked 数组里    去掉也同时删除.

还有就是!! 可能label 样式不好修改   , 将label的css样式中的display:block ; 则可以实现

当然也可以用  原生 js   遍历 在遍历 什么的 也可以;加油!!

h5 页面 实现单选题,多选题功能。的更多相关文章

  1. 移动端H5页面如何屏蔽双击缩放的功能?(转)

    来自大佬的回答: 我在我们的页面中加了很多,除了ios10以上的safari不兼容以外还没有遇到过不兼容的情况. <!-- 视图窗口,移动端特属的标签. --> <meta name ...

  2. 领导让我重新做一个微信H5页面!

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  3. 【干货】微信场景之H5页面制作免费工具大集合

    营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...

  4. 易企秀 we+ Maka 兔展 四大H5页面制作工具

    H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合 ...

  5. 移动端H5页面返回并且刷新页面(BFcache)

    项目中的需求:点击浏览器中的返回按钮,要让页面重新加载资源.因为这部分的资源每次去加载的内容都不一样,如果返回的时候,还是看到原先的内容,那做这个内容块的意义就很小了:而如果用户看完了这部分内容,再返 ...

  6. app嵌入的H5页面的数据埋点总结

    好久没写博客了,大半年时间花费在了许多杂事上. 最近1个月专门为H5页面的app开发了一些埋点功能,主要是考虑到以后的可复制性和通用型,由于不是前端开发出身,相对来说还是比较简陋的. 正题开始:H5页 ...

  7. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...

  8. 基于swiper的移动端H5页面,丰富的动画效果

    概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...

  9. vuejs开发H5页面总结

    最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验. 关于布局方案 当拿到设 ...

随机推荐

  1. KiCad EDA 过孔是否可以开窗?

    KiCad EDA 过孔是否可以开窗? 和传统的商业 EDA 不同,KiCad EDA 的过孔默认就是盖绿油. 在 KiCad 的过孔界面没有任何可以设置的地方,这也有一个好处,不过考虑过孔是否盖油. ...

  2. [自考]C++中一些特殊用法 2016-10-16 22:12 318人阅读 评论(30) 收藏

    做了一段时间的C++的试题了,总结一些这段时间经常犯错和需要注意的地方. 一.常用的保留字和符号 const 定义常量或者参数 void 定义空类型变量或空类型指针,或指定函数没有返回值 static ...

  3. Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

  4. ADO.NET_01

    一.说明 这个例子是小白跟着学习代码记录,模拟用户登陆功能,提示用户输入用户名及密码,然后与数据库里的用户数据进行比对,成功就返回成功提示及邮箱,失败,则失败提示. 二.代码 共3个文件,如下. Ap ...

  5. spingboot项目在windows环境中运行时接收参数及日志中文乱码

    1.logback.xml配置 appender中添加 <param name="Encoding" value="UTF-8" /> <co ...

  6. Java练习 SDUT-1689_斐波那契?

    斐波那契? Time Limit: 1000 ms Memory Limit: 32768 KiB Problem Description 给出一个数列的递推公式,希望你能计算出该数列的第N个数.递推 ...

  7. lattice planner 规划详解

    大家好,我是来自百度智能驾驶事业群的许珂诚.今天很高兴能给大家分享Apollo 3.0新发布的Lattice规划算法. Lattice算法隶属于规划模块.规划模块以预测模块.routing模块.高精地 ...

  8. mysql的root密码忘记解决方

    mysql的root密码忘记解决方 没关注第一步,直接从第二步开始,(可以参看上一篇,先停止mysql服务).然后从第二步开始. 我启动mysql用的命令是/etc/init.d/mysql  sta ...

  9. 模板—堆优化dijkstra

    ];]; void dijkstra(int s) { memset(dis,0x7f,sizeof(dis));ma(v); priority_queue<pair<int,int> ...

  10. 关于==和equals的探索

    在我的概念之中,==在对比两个基本数据类型的时候,对比的是两者的值是否相同.而在对比两个引用数据类型的时候,比较的是两者的内存地址是否相同. 而equals方法,我一直认为这个方法是对比两个引用数据类 ...