Vue 做调查问卷简单实例

需求

调查问卷有三种页面,单选,多选,和多行文本框,下方有上一页下一页和重置的按钮,当为第一页时,只有下一页和重置,最后一页为提交,上一页和重置,且如果单选,多选没有选择时,不可点击下一页.
综合了前面所学的技术.
这个代码运行只有三页,但是当再添加其他问题页时,将十分简单,不需要再进行多余操作,不过依旧是没写css样式
代码奉上

主代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="vue.js"></script><script src="comounts.js"></script><script src="buttons.js"></script>
</head>
<body><div id="app"><div v-for="(item, index) in questions" :key="index"><radio-select :name="item.name" @pick="handlePick" :title="item.title" :choices="item.choices" v-show="page==index"v-if="item.type=='radio'"></radio-select><multi-select @pick="handlePick" :title="item.title" :choices="item.choices"v-show="page==index"v-if="item.type=='multi'"></multi-select><typetext @pick="handlePick":title="item.title"v-show="page==index"v-if="item.type=='typetext'"></typetext></div><mybtn v-show="page == count-1" :banned="isBanned" @click="handleSubmit">提交</mybtn><mybtn v-show="page < count-1" :banned="isBanned" @click="handleNext">下一步</mybtn><mybtn @click="handleReset" :banned="false">重置</mybtn></div><script>const app=new Vue({el:"#app",data:{isBanned:true,page:0,questions:[{   name:'gender',type:'radio',title:'你的性别?',choices:["男","女","保密"]},{   type:"multi",title:'你的爱好',choices:["唱歌","跳舞","rap","篮球"],picked:[]},{type:'typetext',title:'自我介绍',text:""}]},computed:{count: function(){//获取问题的数量,等同于页数return this.questions.length;}},methods: {handlePick:function(val){//通过页数拿到问题let question=this.questions[this.page];switch(question.type){case "radio":if(val){//不禁用按钮this.isBanned=false;this.questions[this.page].picked=val;return;}break;case "multi":if(val.length>=3){this.isBanned=false;question.pickeds=val;return;}break;case "typetext":if(val.length>=10){this.isBanned=false;question.text=val;return;}break;}this.isBanned=true;},isDisable:function(){let question=this.questions[this.page];switch(question.type){case"radio":this.isBanned=question.picked?false:true;break;case "multi":this.isBanned=question.picked.length>=3?false:true;break;case "typetext":this.isBanned=question.text.length>=10?false:true;break;}},handleNext:function(){this.page+=1;this.isDisable();},handlePrev:function(){this.page-=1;this.isDisable();},handleReset:function(){this.$children[this.page].culValue="";this.isBanned=true;},handleSubmit:function(){let str="";this.questions.forEach((item,index) => {switch(index){case 0:str+=item.picked+"  ";break;case 1:str+=item.pickeds+"  ";break;case 2:str+=item.text+"  ";break;}});alert(str)}},})</script></body>
</html>

页面组件

Vue.component("radioSelect",{//组件里的属性props:{//限制只能为String,默认值为gendername:{type:String,default:"gender"},//限制只能为String,默认值为"这是一个单选"title:{type:String,default:"这是一个单选"},//限制只能为数组,默认值为["这道题是空的"]choices:{type:Array,default:function(){return["这道题是空的"];}},},data:function(){let _this=this;let values =[];//将value追加, 循环拿到name为,给每个组件的name和下标组合起来,这样就不会出现相同的name了this.choices.forEach((item,index) => {values.push(_this.name+(index+''));});return{//将上面的values付给外面的valuesvalues:values,culValue:""}},template:`<div><p>{{title}}</p><ul><li v-for="(item,index) in choices"><input v-model="culValue" :value="item" type="radio" :id="values[index]" :name="name" > <label :for="values[index]">{{item}}</label></li></ul></div>`,watch:{culValue:function(val){this.$emit("pick",val)}},
})Vue.component("multiSelect",{props:{name:{type:String,default:"cks"},title:{type:String,default:"这是一个多选"},choices:{type:Array,default:function(){return["这道题是空的"];}}},data:function(){let _this=this;let values =[];this.choices.forEach((item,index) => {values.push(_this.name+(index+''));});return{values:values,culValue:[]}},template:`<div><p>{{title}}</p><ul><li v-for="(item,index) in choices"><input v-model="culValue" :value="item" type="checkbox" :id="values[index]" :name="name" > <label :for="values[index]">{{item}}</label></li></ul></div>`,watch:{culValue:function(val){this.$emit("pick",val)}},
})Vue.component("typetext",{props:{name:{type:String,default:"text"},title:{type:String,default:"这是一个文本"},     },data:function(){return {text:""}},watch:{text:function(val){this.$emit("pick",val)}},    template:`<div><p>{{title}}</p><div><textarea v-model="text"  cols="30" rows="10"></textarea></div></div>`
})

按钮组件

Vue.component("mybtn",{props:{banned:{type:Boolean,default:true}},template:`<button @click="handeClick" :disabled="banned"><slot></slot></button>`,methods:{handeClick:function(){this.$emit("click")}}
})

如有问题建议,欢迎进行批评建议,vue学习告一段落,接下来开始学习notejs了,大家一起加油!!!

Vue 做调查问卷简单实例相关推荐

vue实现调查问卷一页一题，上一题下一题形式
使用了vant组件的radio 单选框官网https://youzan.github.io/vant/#/zh-CN/radio 效果图效果图做出来的效果图就是上面那样一页一题附上代码: & ...
java程序如何做调查问卷_《Java程序设计》课程准备之问卷调查
一.你对自己的未来有什么规划?做了哪些准备? 答:未来就是找个好工作,在保证自己与父母生活条件良好的基础上,进一步的提高精神上的需求.如:旅游度假,支持更多业余爱好等.准备就是:好好学习,好好运动,好 ...
用Vue做个最简单的搜索框
一.找出百度搜索的链接打开百度,随便搜索一下,看搜索之后的超链接把超链接复制过来 https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1& ...
Vue使用antV G2简单实例
工作中需要制作一个看板,选型选用antV G2进行开发. 由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用. 1.安装antv/g2 在WebStrom下面Terminal中输入 np ...
有偿调查问卷赚钱攻略
一.为什么做问卷调查就能赚到钱? 每个行业都有它存在的道理!这份问卷调查兼职也不例外,这就牵涉到生产者与消费者之间的关系了.对于生产者而言,每个公司或厂家都都想清楚知道,消费者对自家甚至同行的产品态度 ...
使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
记一次微信小程序云开发实例（简单调查问卷）
y1s1,十分想吐槽一下微信小程序,文档写不全,开发方式复杂. 顺带吐槽老师讲课就提个概念. 相关的文档可参考https://developers.weixin.qq.com/community/bu ...
3.Vue.js 实战调查问卷WebApp项目
问卷调查demo已上传,欢迎大家指正,欢迎大家下载:https://download.csdn.net/download/lzb348110175/11085995 如果您没积分的话,可以私信/评论, ...
Vue.js学习笔记—调查问卷WebApp
参考<Vue,js>实战(梁灏编著) 基础篇的章节内容涵盖了Vue.js 2.x最常用的功能.如果不需要前端路由和自动化工程,已经可以利用这些内容做一些中小型项目了.在进入进阶篇之前,通过 ...
vue+element-ui创建调查问卷
使用vue+element-ui制作创建调查问卷功能: 代码如下:(只是一些简单功能) <template><div class="container">& ...

Vue 做调查问卷简单实例

需求

Vue 做调查问卷简单实例相关推荐

最新文章

热门文章