vue写的问卷改html,Vue2.0 完成调查问卷WebApp

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

效果

需求

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

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

index.html

Title

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) {

var radio_value = el.target.value;

if( typeof radio_value != 'undefined' && radio_value != '' ){

this.disabledOne = false;

this.sex_list[index].checked = true;

}else{

this.disabledOne = true;

}

},

checkboxChange: function (el,index) {

var boxvalue = el.target.checked;

var count = 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) {

var value = el.target.value;

var length = 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 ++;

var obj = {};

this.sex_list.forEach(function (item) {

if( item.checked ){

obj.sex = item.name;

}

});

this.user_data = obj;

},

nextQuestionThree:function () {

var count = 0;

var obj = 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( typeof this.user_data.introduction != 'undefined' ) delete this.user_data.introduction;

this.page --;

},

submit:function () {

var obj = 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

var app = new Vue({

el:'#app',

data:{

page:1

},

});

style.css

[v-cloak]{

display: none;

}

body,input,button,textarea,div{

margin:0;

padding:0;

}

#app{

margin:20px 15px;

}

.options{

margin-top:13px;

}

.options input[type=radio]:not(:first-child){

margin-left:13px;

}

.options input[type=radio]{

margin-right:5px;

}

.options input[type=checkbox]:not(:first-child){

margin-top:15px;

}

.options input[type=checkbox]{

margin-right:5px;

}

.not_display{

display: none;

}

textarea{

/*padding:50px 85px;*/

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:1px solid #cccccc;

border-radius: 5px;

}

.buttonOne{

padding:7px 30px;

margin-right:10px;

width:45%;

}

input[type=submit]{

width:29%;

height:32px;

margin-right:7px;

border:1px solid #cccccc;

border-radius: 5px;

}

/*.buttonOne:hover{*/

/*background-color:#cccccc;*/

/*border:1px solid #cccccc;*/

/*}*/

.greyColor{

background-color:#808080;

border:1px solid #808080;

color:#fff;

}

.disabledColor{

background-color:#cccccc;

border:1px solid #cccccc;

}

.second_quesiton button{

padding:7px 30px;

width:30%;

margin-right:5px;

}

最终效果图截图：

最终数据：