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: '
+ '
+ '{{item.name}}'
+ '
'
+ '
+ '下一步'
+ '重置'
+ '
'
+ '
+ '
+ '{{item.name}}
'
+ '
'
+ '
+ '下一步'
+ '上一步'
+ '重置'
+ '
'
+ '
+ '
+ '
+ '提交'
+ '上一步'
+ '重置'
+ '
',
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;
}
最终效果图截图:
最终数据:
vue写的问卷改html,Vue2.0 完成调查问卷WebApp相关推荐
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
- vue 添加全局组件_自定义vue2.0全局组件(下篇)
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
- 公共计算机课程教学情况调查问卷,信息技术课程标准实施情况调查问卷.doc
信息技术课程标准实施情况调查问卷 高中信息技术课程标准实施情况调查问卷(教师卷) 尊敬的各位老师: 您们好,为全面了解新课程理念下的高中信息技术课程改革的教学实施情况,促进高中信息技术新课程建设和教学 ...
- 刷问卷星调查问卷_如何通过回答快速调查问卷从Google获得免费资金
刷问卷星调查问卷 It is a truth universally acknowledged that a search engine in possession of a good fortune ...
- html5发展现状调查问卷,《小班语言发展现状调查问卷分析报告》
小班语言发展现状调查问卷分析报告 语言是一种社会现象,具有交际性和工具性.正如柏拉图所说的那样,语言是教育的工具,是幼儿认识世界的工具.语言对幼儿的德.智.体.美.劳全面发展教育有着重要的作用.语言能 ...
- html实践环节制作调查问卷,HTML大学生暑假社会实践调查问卷源代码
昨天打的一个HTML代码,分享出来 先看图片效果: 代码如下: 这是style的内容 #di1{ border:1px solid #6495ED ; width: 700px; height: 10 ...
- SurveyKing-一键搭建比问卷星更强大的企业级调查问卷系统
SurveyKing 是一款功能强大,安装简单的开源问卷系统,支持调查问卷.考试.公开查询.投票等. 无论是编辑体验还是问题设置.逻辑设置,SurveyKing 都已经超过超过问卷星. 下面从这三个方 ...
- vue 仿二手交易app_项目vue2.0仿外卖APP(七)
ratings评价列表页实现 在ratings.vue组件里开发 首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...
- vue 仿二手交易app_项目vue2.0仿外卖APP(二)
vue-cli开启vue.js项目 Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工人搭建好的架子,能够帮助工人们作业:在技术圈,脚手架就是来帮助我们编写好基础的代码的 ...
最新文章
- 【CentOS 7MySQL常用操作2】,连接MySQL#180112
- python matplot 绘图
- matlab global(全局变量)
- c语言最简单的程序编写,C语言简单程序编写.doc
- PyTorch 1.9发布!移动端疯狂更新
- urlib2和requests模拟登陆查询MD5
- linux如何运行sh监控文件夹,如何使用Shell进行文件监控?
- 【C语言】一维数组排序(函数,数组和循环结构语句)
- mtk android 设置默认铃声,[转载]MTK修改铃声资源
- 我就不信发不出去,工 作 时候用的,来啊=》模板下载
- CDlinux如何制作U盘启动(附带Minidwep-gtk工具)
- 七牛云视频转码 php,学习猿地-我的扩展包分享 - 七牛云视频转码
- 哥德尔命题6、背景知识和ω一致性观念——哥德尔读后之十七021-08-09
- 【Fuzzy】隶属度函数和模糊推理
- 吉利有后手,魅族没有
- Ethernet(以太网) 详解 MAC、MII、PHY
- LaTeX复选框实现
- 配色,蓝色加点橙色好看
- 2021年汽车半导体行业研究报告
- python预测体彩大乐透