Vue2.0 完成调查问卷WebApp

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

效果

需求

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

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

index.html

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;
}

表单提交相关的文章可以参考：
https://blog.csdn.net/caixiaodaohaha/article/details/78860452

最终效果图截图：

最终数据：