div+mui+vue.js制作问卷调查单页——题⽬答案是造的json
div+mui+vue.js 制作问卷调查单页 ——题⽬答案是造的json
先来看⼀下效果图：
主要就是⽤读取json题⽬和答案，记录答案ID。 ⼀次性去读10道题⽬，vue.js控制当前题⽬的显⽰影藏。上⼀题 记录 已选择，下⼀题判断是否选择了。最后弹出框 显⽰ ，然后按后台需求提交。
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-arrowadd"></a>
<h1 class="mui-title">问卷调查</h1>
</header>
<div class="mui-content mui-content-bgcolor" id="vmode">
<div class="questionnaire2">
<div id="questionnaire2-box">
<div class="questionitem" v-for="(item,index) in questionitems" :data-index="index" @click="oprev(index)">
<div class="questionbox" v-show="active === index">
<div class="questionnaire2-tit">
borderbox
<p>{{index+1}}/10</p>
<p>{{item.question_title}}</p>
</div>
<div class="questionnaire2-con">
<dl class="mui-input-group">
<dd class="mui-input-row mui-radio mui-left" v-for="(items,i) in item.question_answerlist" :key='i'>
<input type="radio" name="radio2" :value="items.answer_id" v-model="answer"/><label class="advice">{{items.answer_option}}</label>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="questionnaire2-fot">
<a @click="olast">上⼀题</a><a @click="oNext" v-if='showNext'>下⼀题</a>
<input type="button" id="questionbtn"  v-else @click ='subquestion' value="提交"/>
</div>
css:
/*toast信息提⽰*/
.mui-toast-container {bottom: 50% !important;}
/
* 问卷调查2 */
.questionnaire2{margin:40px 20px 0 ;background-color: #fff;}
.questionnaire2-tit{background-color: #06b5ff;border-top-left-radius: 10px;border-top-right-radius: 10px;padding:10px 0;}
.questionnaire2-tit p{ color: #fff;font-size: 18px;text-align: center;margin-bottom: 0;padding:0 10px;}
.questionnaire2-tit p:nth-of-type(2){text-align: left;padding-top:10px;min-height:33px;max-height:73px;overflow: hidden;}
.questionnaire2-con{padding:0 10px;background-color: #fff;}
.questionnaire2-con dl{margin:0;}
.questionnaire2-con dl dd{margin:0;height:auto!important;}
.questionnaire2-con dl dd:last-child{border-bottom: 0;}
.questionnaire2-fot{margin-left: 20px;margin-right: 20px; border-bottom-left-radius: 10px;border-botto
m-right-radius: 10px;overflow: hidden;background-col or: #fff;box-sizing: border-box;border-top:1px solid #f4f4f4;}
.questionnaire2-fot a{display: inline-block;float: left; width:50%;padding:15px 0;text-align: center; color: #999;}
.questionnaire2-fot a:first-child{border-right:1px solid #f4f4f4;}
.questionnaire2-fot #next.w{width:100%;}
.questionnaire2-fot #questionbtn{width:50%;border:none;font-size: 17px;padding:15px 0; color: #007aff; }
.mui-popover-question{width:86%!important;top:50%;left:50%;transform: translate(-50%,-50%)!important;padding:20px;height:260px;}
.mui-popover-question.minheight{height:200px;}
.mui-popover-question.minheight2{height:180px;}
.
mui-popover-question h1{font-size:16px; text-align: center;color: #333;font-weight: normal;line-height: 24px;padding-bottom: 10px;margin:0;}
.mui-popover-question h1 img{width:20px;height: 20px;margin-left: 10px;margin-top:1px;}
.mui-popover-question h2{font-size:14px;color: #999;padding:5px 0;font-weight: normal;text-align: center;}
.mui-popover-question p{font-size:14px;color: #999;text-align: center;}
.mui-popover-question p.martop2{padding:15px 0;}
.mui-popover-question p.martop span{color: #007aff;font-size:18px;padding:0 3px;}
.mui-popover-question .closebox{display: block; width:90px;border:none;border-radius: 5px;color: #fff;background-color: #f68644;margin-left:auto;margin-ri ght:auto;}
.mui-popover-question .review{font-size: 12px; display: block;text-align: center;padding-top: 10px;color:#999;}
不想复制的朋友，可以到这⾥下载个看看