h5 页面 实现单选题,多选题功能。
效果图:

项目要求:
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 页面 实现单选题,多选题功能。的更多相关文章
- 移动端H5页面如何屏蔽双击缩放的功能?(转)
来自大佬的回答: 我在我们的页面中加了很多,除了ios10以上的safari不兼容以外还没有遇到过不兼容的情况. <!-- 视图窗口,移动端特属的标签. --> <meta name ...
- 领导让我重新做一个微信H5页面!
leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...
- 【干货】微信场景之H5页面制作免费工具大集合
营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...
- 易企秀 we+ Maka 兔展 四大H5页面制作工具
H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合 ...
- 移动端H5页面返回并且刷新页面(BFcache)
项目中的需求:点击浏览器中的返回按钮,要让页面重新加载资源.因为这部分的资源每次去加载的内容都不一样,如果返回的时候,还是看到原先的内容,那做这个内容块的意义就很小了:而如果用户看完了这部分内容,再返 ...
- app嵌入的H5页面的数据埋点总结
好久没写博客了,大半年时间花费在了许多杂事上. 最近1个月专门为H5页面的app开发了一些埋点功能,主要是考虑到以后的可复制性和通用型,由于不是前端开发出身,相对来说还是比较简陋的. 正题开始:H5页 ...
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
- 基于swiper的移动端H5页面,丰富的动画效果
概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...
- vuejs开发H5页面总结
最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验. 关于布局方案 当拿到设 ...
随机推荐
- <Mysql必知必会> ---- 笔记
转载自 https://www.jianshu.com/p/294502893128 挺基础的mysql的书籍,基本上都是如何操作的语法. 第1章 了解SQL 主键(primary key):能够唯 ...
- Python 基础09 面向对象的进一步拓展
调用类的其他信息 上一讲中提到,在定义方法时,必须有self这一个参数,这个参数表示某个对象,对象有有类的所有性质, 那么我么可以通过self 调用类属性. class Human(object): ...
- day5_python之subprocess模块
subprocess作用:用来执行系统命令它会开启一个子进程,通过子进程去执行一些命令 读取正确的命令执行结果,如果没有指定把结果输出到哪里,默认打印到屏幕上 #subprocess.Popen(r' ...
- 首次揭秘:阿里巴巴中间件在 Serverless 技术领域的探索
Serverless 话题涉及范围极广,几乎包含了代码管理.测试.发布.运维和扩容等与应用生命周期关联的所有环节.AWS Lambda 是 Serverless 领域的标志性产品,但如果将其应用于核心 ...
- 2019-8-31-PowerShell-通过-WMI-获取系统信息
title author date CreateTime categories PowerShell 通过 WMI 获取系统信息 lindexi 2019-08-31 16:55:58 +0800 2 ...
- 阿里云ECS服务器活动99元一年,最高可买三年
这几天阿里云 99一年.279三年的服务器活动如火如荼,和之前腾讯三年的服务器非常类似,非常低的价格换取非常高的价值,当然,通常情况下便宜没好货的,想要玩一下的老铁可以进阿里云去看看,阿里云270三年 ...
- jq杂项方法/工具方法----trim() html() val() text() attr()
https://www.cnblogs.com/sandraryan/ $.trim() 函数用于去除字符串两端的空白字符.在中间的时候不会去掉. var str = ' 去除字符串左右两端的空格,换 ...
- 教你怎么让vi和vim显示行数
首先我们来看看没有行号是多么难看. 2 再来看看有行号后的效果. 3 设置行号很简单. 我们要到命令模式下,输入set number :set number 按下回车 来看看效果 4 那么怎么关闭行号 ...
- 以P2P网贷为例互联网金融产品如何利用大数据做风控?
以P2P网贷为例互联网金融产品如何利用大数据做风控? 销售环节 了解客户申请意愿和申请信息的真实性:适用于信贷员模式. 风控关键点 亲见申请人,亲见申请人证件,亲见申请人签字,亲见申请人单位. 审 ...
- The 'decorators' plugin requires a 'decoratorsBeforeExport' option, ...(npm start报错)
问题描述: 在npm start启动react项目的时候,出现了如下报错: The 'decorators' plugin requires a 'decoratorsBeforeExport' op ...