前端动态数据实现问卷调查

#前端动态数据实现问卷调查

##最近有个项目，需要做问卷调查,，用ajax请求返回的数据进行遍历操作，以下都是页面的内容

这是简单的单选按钮，性别的实现，

			<div class="question">
                <div class="tit">
                    <span>3、您的性别</span>
                </div>
                <div class="checks">
                    <div style="display: flex;padding:0.3rem 0;border-bottom: 1px solid #E5E5E5;">
                        <label for="boy"><i class="fa"
                                v-bind:class="obj.user_xingbie==='1'?'fa-check-circle-o':'fa-circle-o'"
                                @click="obj.user_xingbie='1'"></i> 男</label>
                    </div>
                    <div style="display: flex;padding:0.3rem 0;">
                        <label for="girl"><i class="fa"
                                v-bind:class="obj.user_xingbie==='2'?'fa-check-circle-o':'fa-circle-o'"
                                @click="obj.user_xingbie='2'"></i> 女</label>
                    </div>
                </div>
            </div>

###以上是html代码，

<script>
var app = new Vue({
        el: '#app',
        data: {
            obj: {
                user_xingbie: '1',
            },
        },
})
</script>

###这些是最简单的实现单选按钮功能

动态数据实现单选多选按钮

 <div class="question" v-for="(im,ix) in list" :key="ix">

                <div v-if="im.ztype == '1'">
                    <div class="tit">
                        <span>{{im.sort +7}}、{{im.title}}</span>
                    </div>
                    <div class="checks">
                        <div v-for="(jm, jx) in im.item" v-bind:key="jx" style="border-bottom: 1px solid #E5E5E5;">
                            <div style="padding:0.3rem 0;">
                                <div>
                                    <label for="jm.zid" @click="check(im, jm)">
                                        <i class="fa"
                                            :class="im.checked.indexOf(jm.zid)>-1?'fa-check-circle-o':'fa-circle-o'"></i>
                                        {{jm.title}}
                                    </label>
                                </div>
                                <div v-show="jm.title == '其它' ">
                                    <input v-model="jm.content" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="im.ztype == '2'">
                    <div class="tit">
                        <span>{{im.sort +7}}、{{im.title}}</span>
                    </div>
                    <div class="checks">
                        <div v-for="(jm, jx) in im.item" v-bind:key="jx" style="border-bottom: 1px solid #E5E5E5;">
                            <div style="padding:0.3rem 0;">
                                <div>
                                    <label for="jm.zid" @click="check(im, jm)">
                                        <i class="fa"
                                            :class="im.checked.indexOf(jm.zid)>-1?'fa-check-square-o':'fa-square-o'"></i>
                                        {{jm.title}}
                                    </label>
                                    <div v-show="jm.title == '其它'">
                                        <input v-model="jm.content" type="text">
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="im.ztype == '3'">
                    <div class="tit">
                        <span>{{im.sort +7}}、{{im.title}}</span>
                    </div>
                    <div class="checks">
                        <div v-for="(jm, jx) in im.item" v-bind:key="jx" style="border-bottom: 1px solid #E5E5E5;">
                            <div>
                                <label for="jm.zid" @click="check(im, jm)">
                                    <input type="text" v-model="jm.content">
                                </label>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

##ztype判断类型，1 为单选 2 为多选 3 为input， 其他

#页面发送ajax请求后返回的数据，先将其进行整理，rs.list是题目，list下面的item为选项，遍历返回的rs.list,然后设置一个空数组，在单选的时候，点击每一项,将jm的content设置为自身的id， 在多选时将自身的id，push到数组中。

//		这是发送ajax返回的数据，对数据进行的处理
			$.each(rs.list, function (ix, im) {
                        im.checked = [];
                        $.each(im.item, function (jx, jm) {
                            jm.content = '';
                        });
                    })
                    that.list = rs.list;

//这是方法
 check: function (im, jm) {
                var that = this;
                if (im.ztype == '1') {
                    im.checked = [jm.zid];
                } else if (im.ztype == '2') {
                    if (im.checked.indexOf(jm.zid) > -1) {
                        im.checked.splice(im.checked.indexOf(jm.zid), 1)
                    } else {
                        im.checked.push(jm.zid);
                    }

                }
            },

以上仅限于个人的一些学习总结。