WEBAPP开发之Vue2.0 完成调查问卷WebApp-职坐标

WEBAPP开发之Vue2.0 完成调查问卷WebApp

白羽 2018-08-13 来源：网络阅读 2514 评论 0

摘要：本文将带你了解WEBAPP开发之Vue2.0 完成调查问卷WebApp，希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发之Vue2.0 完成调查问卷WebApp，希望本文对大家学WEBAPP有所帮助。

最近一直在看vue.js实战，里面有一个项目实践，需求与效果如下：

效果

需求

我现在把此项目分成index.html,question.js,index.js以及style.css四个文件（其中说到的按钮制作成组件，可以自己实现，我这里就没做）。

注：此处是手机端，请调整到手机调试下跑该项目。

index.html注意：v-model是双向绑定的数据，其实这里用v-bind也可以，它与v-model的区别是v-bind是单向数据流，而v-model是双向数据流。也就是子组件可以通过$emit来传递数据回父组件，而v-bind只能是从父组件传递数据到子组件。

question.js
Vue.component('question',{
props:['value'],
template:'

1.请问您的性别是：'
+''
+'{{item.name}}'
+'

'
+'

'
+'下一步'
+'重置'
+''
+'2.请选择您的兴趣爱好：'
+''
+'{{item.name}}
'
+''
+''
+'下一步'
+'上一步'
+'重置'
+''
+'3.请介绍一下自己：'
+'

'
+''
+'提交'
+'上一步'
+'重置'
+'',
data:function(){
return{
sex_list:[
{name:'男'},
{name:'女'},
{name:'保密'}
],
hobbies:[
{name:'看书'},
{name:'游泳'},
{name:'跑步'},
{name:'看电影'},
{name:'听音乐'}
],
disabledOne:true,
disabledTwo:true,
disabledThree:true,
buttonone:'buttonOne',
greycolor:'greyColor',
text:'',
page:this.value,
user_data:{
}
}
},
methods:{
radio_change:function(el,index){
varradio_value=el.target.value;
if(typeofradio_value!='undefined'&&radio_value!=''){
this.disabledOne=false;
this.sex_list[index].checked=true;
}else{
this.disabledOne=true;
}
},
checkboxChange:function(el,index){
varboxvalue=el.target.checked;
varcount=0;
if(boxvalue==true){
this.hobbies[index].checked=true;
}else{
this.hobbies[index].checked=false;
}

this.hobbies.forEach(function(item){
if(item.checked==true){
count++;
}
});

if(count>=2){
this.disabledTwo=false;
}else{
this.disabledTwo=true;
}
},
checkLength:function(el){
varvalue=el.target.value;
varlength=value.length;
if(length>=10){
this.disabledThree=false;
}else{
this.disabledThree=true;
}
this.text=value;
},
restartQuestionOne:function(){
this.sex_list.forEach(function(item){
item.checked=false;
});
this.disabledOne=true;
},
restartQuestionTwo:function(){
this.hobbies.forEach(function(item){
item.checked=false;
});
this.disabledTwo=true;
},
restartQuestionThree:function(){
this.text='';
this.disabledThree=true;
},
nextQuestionTwo:function(){
this.page++;
varobj={};
this.sex_list.forEach(function(item){
if(item.checked){
obj.sex=item.name;
}
});
this.user_data=obj;
},
nextQuestionThree:function(){
varcount=0;
varobj=this.user_data;
obj.hobbies=[];
this.hobbies.forEach(function(item){
if(item.checked==true){
obj.hobbies.push(item.name);
count++;
}
});
this.user_data=obj;
if(count>3){
alert('不得超过三项,请重新选择');
}else{
this.page++;
}
},
lastStepOne:function(){
this.user_data={};
this.hobbies.forEach(function(item){
item.checked=false;
});
this.page--;
},
lastStepTwo:function(){
this.text='';
if(typeofthis.user_data.introduction!='undefined')deletethis.user_data.introduction;
this.page--;
},
submit:function(){
varobj=this.user_data;
obj.introduction=this.text;
this.user_data=obj;
console.log(this.user_data);
//ajax发送数据到后台
},
}
});

question.js注意
1、这里我把三个页面整合到一起，能过v-if,v-else-if,v-else来判断显示模块。
2、需要注意的是单项选择的时候，标签中只要存在checked属性就会被选中，所以这里我用:checked来判断是否有该checked属性。
3、进入下一步之前先要判断当前的选择是否符合需求。单选选中之后再可以进入下一步，重置选项可以清除当前页的选择;复选框最少要有两个选择，最多则只有三个选择，选择两个的时候显示下一步并判断当前的选项有几个，如果超出三个给出提示，并不能进入下一步。
4、textarea中有属性autofocus是进入当前页，自动聚焦。必须有rows，cols属性才能有blur事件。
5、点击所有的上一步，都要清空当前页的数据。

index.js
varapp=newVue({
el:'#app',
data:{
page:1
},
});

style.css
[v-cloak]{
display:none;
}
body,input,button,textarea,div{
margin:0;
padding:0;
}
#app{
margin:20px15px;
}
.options{
margin-top:13px;
}
.optionsinput[type=radio]:not(:first-child){
margin-left:13px;
}
.optionsinput[type=radio]{
margin-right:5px;
}
.optionsinput[type=checkbox]:not(:first-child){
margin-top:15px;
}
.optionsinput[type=checkbox]{
margin-right:5px;
}
.not_display{
display:none;
}
textarea{
/*padding:50px85px;*/
margin-left:11px;
margin-top:9px;
}
.able_color{
color:#3399ff;
}
.disable_color{
color:#808080;
}
.restart-color{
color:#fff;
}
.big-size{
width:200px;
}
.small-size{
width:150px;
}
.step_bottom{
height:35px;
width:100%;
position:absolute;
bottom:30px;
}
button{
background-color:transparent;
outline:none;
border:1pxsolid#cccccc;
border-radius:5px;
}
.buttonOne{
padding:7px30px;
margin-right:10px;
width:45%;
}
input[type=submit]{
width:29%;
height:32px;
margin-right:7px;
border:1pxsolid#cccccc;
border-radius:5px;
}
/*.buttonOne:hover{*/
/*background-color:#cccccc;*/
/*border:1pxsolid#cccccc;*/
/*}*/
.greyColor{
background-color:#808080;
border:1pxsolid#808080;
color:#fff;
}
.disabledColor{
background-color:#cccccc;
border:1pxsolid#cccccc;
}
.second_quesitonbutton{
padding:7px30px;
width:30%;
margin-right:5px;
}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

电视app软件下载移动端开发与pc端开发的区别 app页面设计规范

本文由 @白羽发布于职坐标。未经许可，禁止转载。