优化代码==＞常见问卷调查模板，多端通用版本

<html data-dpr="1" style="font-size: 37.52px;"><head><title>问卷调查</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta data-hid="description" name="description" content=""><meta name="wap-font-scale" content="no"><link rel="icon" href="./img/lw.ico" type="image/x-icon" /><link rel="stylesheet" type="text/css" href="css/question.css" /><!-- 引入 Vue 和 Vant 的 JS 文件 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script></head><style>[v-clock]{display: none;}</style><body style="font-size: 24px;"><div id="app"><div class="main_html" v-cloak><div class="main-content" style="background:#fff;margin-top:0px;"><div class="header-content"><div class="heder-wraps"><div class="back-wrap"><!--    <img src="https://pic.baikemy.com/obj/project-l-cdn/mobileweb/static/images/head-back.png"alt="" class="back-icon"> --></div><div class="title-wrap">{{title}}</div><div class="right-wrap"><!-- <img src="https://pic.baikemy.com/obj/project-l-cdn/mobileweb/static/images/head-search.png"alt="" class="search-icon" ><img src="https://pic.baikemy.com/obj/project-l-cdn/mobileweb/static/images/head-menu.png"alt="" class="menu-icon"> --></div></div><div class="content"><div class="self_test_warp"><div class="self_test_title">{{title}}</div><div class="back_schedule_wrap"><div class="self_test_back_wrap "><img id="backImg" src="https://pic.baikemy.com/obj/project-l-cdn/mobileweb/static/images/self_test_back.png"alt="" :class="[Qindex>0?'':'display_none']"> <span id="backTxt" :class="[Qindex>0?'':'display_none']"@click="getBack">上一题</span></div><div class="schedule_txt_wrap">{{Qindex+1}}/{{quesList.length}}</div></div><div class="schedule_wrap"><div class="cur_schedule" :style="{'width':(Qindex+1+'0'+'%')}"></div></div><div class="self_test_question"><span class="question_index">问题{{Qindex+1}}</span><spanid="curQuestionTitle">{{quesList[Qindex].title}}</span></div><ul class="self_test_main_wrap"><li score="0" class="self_test_item self_test_normal" v-for="(item,index) in quesList[Qindex].answerList"@click="getRadio(index,index)" :class="[item.active?'self_test_select':'']"><div class="self_test_icon choose_normal" :class="[item.active?'choose_select':'']"></div><div class="self_test_option" :style="{'color':(item.active?'#5D91F6':'#333'),'border':(item.active?'1rpx solid #5D91F6':'1rpx solid #999')}">{{item.name}}</div></li></ul></div></div><div id="submitQuestion" @click="getSubmit" class="sub_btn fixed" :class="[Qindex==9?'':'display_none']">提交</div></div></div></div><script>new Vue({el: '#app',data: {Qindex: 0,title: "糖尿病自测",quesList: [{title: "您的年龄是多少?",answerList: [{name: "<40岁"}, {name: "40-59岁"}, {name: "≥60岁"}, ]},{title: "您的饮食结构是否主食多、绿色蔬菜少？",answerList: [{name: "否"}, {name: "是"}]},{title: "您是否经常（每周≥4次）食用含糖量高或高脂肪的食物？",answerList: [{name: "否"}, {name: "是，仅少量品尝"}, {name: "是，经常食用"}]}, {title: "您是否经常运动（每周有5天保证有30分钟以上的活动 ，如快走等）？",answerList: [{name: "否"}, {name: "是"}]}, {title: "您的体重指数是多少？[BMI=体重/身长的平方（体重以千克为单位，身长以米为单位）] ",answerList: [{name: "<25"}, {name: "25.0～29.9"}, {name: "≥60"}]}, {title: "您的父母或兄弟姐妹中是否有人患有糖尿病？",answerList: [{name: "否"}, {name: "是"}]}, {title: "您是否有夜间睡眠打鼾及呼吸暂停的现象？",answerList: [{name: "否"}, {name: "偶尔打鼾（每周≤2晚）不伴呼吸暂停"}, {name: "经常打鼾（每周≥3晚）并有呼吸暂停"}]}, {title: "您是否有如下症状：多饮、多尿、易饥，是否有餐前低血糖症状 ？",answerList: [{name: "否"}, {name: "有其中1项"}, {name: "有其中2项"}, {name: "3项均有"}]}, {title: "您是否血压高或血脂高？",answerList: [{name: "否"}, {name: " 其中一项高"}, {name: "两项均高"}]}, {title: "您以往体检发现空腹血糖高（>6.1mmol/L）或餐后2小时血糖高（>7.8mmol/L）？",answerList: [{name: "否"}, {name: "曾发现1次"}, {name: "曾发现2次或以上"}]}]},mounted() {},methods: {/*** 返回上一题*@param {Qindex}当前题目* **/getBack() {var that = this;if (that.Qindex > 0) {that.Qindex = that.Qindex - 1;}},/*** 选中列表* @param {index} 当前选中选项 */getRadio(item, index) {var that = this;// 获取到选择答案数据var list = that.quesList[that.Qindex].answerList;//循环数组数据，判断是否选中for (var i in list) {if (index == i) {list[i].active = true;// 这里更新进度条if (that.Qindex < 9) {that.Qindex = that.Qindex + 1;}} else {list[i].active = false;}}// 避免页面渲染无效that.$forceUpdate();},/**提交数据**/getSubmit(){// 获取最终用户选中的数据var that=this;// that.quesList此数据是问题跟选项数组数据,选项中参数active为true，标识用户选中的数据console.log("用户最终选中的数据====>",that.quesList);// 跳转问卷结果页面window.location.href="result.html"}}})</script></body>
</html>

优化代码==＞常见问卷调查模板，多端通用版本相关推荐

java优化代码常见套路
目录程序员的痛点(烂代码) 该如何优化代码前台后台两次md5加盐加密 JSR303和全局异常处理 Redis通用的key生成策略和通用的RedisService方法程序猿的必读书籍程序员的痛点 ...
c语言学籍管理系统小程序,学籍业务办理系统(开源 v2.0发布优化代码，增加小程序端)...
更新说明: 1.此2.0版,大幅度优化代码,增加小程序端方便使用 2.v1.0测试地址已关,请勿测试学生在校期间避免不了要和各种证明打交道,比如学籍证明.转专业申请.休学申请.退学申请等等.此类业务 ...
H.264解码器ffmpeg完整优化代码（包括PC和Windows Mobile版本）
这里把前段时间对ffmpeg0.48进行简化和修改,包括修正内存泄漏,修改一些语句使Max Speed能够打开这些.其实代码还是比较乱的,也有很大的继续优化空间.这个工作花费了我一些休息时间,不过,我 ...
六.激光SLAM框架学习之A-LOAM框架---项目工程代码介绍---4.laserMapping.cpp--后端建图和帧位姿精估计（优化）
专栏系列文章如下: 一:Tixiao Shan最新力作LVI-SAM(Lio-SAM+Vins-Mono),基于视觉-激光-惯导里程计的SLAM框架,环境搭建和跑通过程_goldqiu的博客-CSDN ...
【Axure电商原型】电商app高保真原型、移动端通用版电商app模板、用户中心、会员体系、签到、高保真商城app、rp原型、直播、运营活动、订单管理、售后退款、电商系统、购物车、高保真移动端电商
[Axure电商原型]电商app高保真原型.移动端通用版电商app模板.用户中心.会员体系.高保真商城app.rp原型.订单流程.运营活动.订单管理.售后及服务.电商系统.购物车.高保真移动端电商.店 ...
Axure企业官网通用模板web端+公司官网通用模板web端高保真原型+服务企业门户官网+加入我们+在线招聘+企业宣传+新闻动态+企业理念+产品与服务+公司通用版官方电脑端门户网站
作品介绍:Axure企业官网通用模板web端+公司官网通用模板web端高保真原型+服务企业门户官网+加入我们+在线招聘+企业宣传+新闻动态+企业理念+产品与服务+公司通用版官方电脑端门户网站原型演示 ...
客房预订+餐饮预订+酒店app+移动端通用版电商app模板+Axure高保真酒店预订管理系统+积分商城+餐饮预订系统+优惠券+订单管理+移动端酒店管理原型+酒店电商原型
作品介绍:[Axure电商原型]电商APP高保真原型(交互+UI高保真)+移动端通用版电商app模板+Axure高保真酒店预订管理系统+积分商城+餐饮预订系统+优惠券+订单管理+移动端酒店管理原型+酒 ...
prd移动端通用产品需求文档+Axure高保真app社交订餐通用prd文档+产品业务说明+PRD功能性需求+移动端公工通用模板说明+需求分析+竞品分析+产品结构图+产品业务流程图+产品信息图+餐饮系统
作品介绍:prd移动端通用产品需求文档+Axure高保真app社交餐饮通用prd文档+产品业务说明+通用prd文档+移动端公工通用模板++全局说明+需求分析+竞品分析+产品结构图+产品业务流程图+产品 ...
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件原型展示及下载地址:h ...
四种高性能数据类型，Python collections助你优化代码、简洁任务
在这篇文章中,机器学习工程师 George Seif 介绍了 Python collections 模块最受欢迎的四种数据类型以及它们各自的使用方法.这些数据类型可以对代码进行优化,进而实现更简洁的任 ...

优化代码==＞常见问卷调查模板，多端通用版本

优化代码==＞常见问卷调查模板，多端通用版本相关推荐

最新文章

热门文章