基于vant实现一个问卷调查

最新推荐文章于 2024-05-30 11:51:01 发布
最新推荐文章于 2024-05-30 11:51:01 发布
阅读量1.5k 收藏 8
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/pangchunlei/p/10949416.html
版权
本文介绍如何结合《vue实战》的学习与Vue移动端框架Vant，实现一个简单的问卷调查项目。通过创建Vue单文件组件，传递题目数据到子组件，处理用户选择和输入，并在用户交互后更新答案。尽管初次尝试，逻辑可能冗余，但为后续优化打下基础。
摘要由CSDN通过智能技术生成

实现背景 

最近学习《vue实战》，第二篇进阶篇有一个练习

刚好最近在研究vue移动端框架vant

两者结合，实现这么个小项目

实现代码

新建 vue单文件 L0529L.vue

<template>
  <div class="dom">
    <div class="tmnr">{
    {showtm+1}}. {
    {timu[showtm]['tmcontent']}}</div>
    <component0529
      :info="ziInfo"
      :showtm="showtm"
      @chooseRadio="changeAnswer"
      @chooseCheckbox="changeAnswer"
      @chooseInput="changeAnswer"
    ></component0529>
    <div class="buttondom">
      <van-button type="primary" v-show="showtm>0" @click="shangtm" :disabled="showtm===0">上一题</van-button>
      <van-button
        type="primary"
        v-show="showtm<timu.length-1"
最低0.47元/天 解锁文章
weixin_30737363
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+vant 实现移动端问卷答题
迷路大叔的博客
03-09 3591
因为工作需要，写一个类似驾考宝典答题的功能，使用 vue+vant。
H5的简单模板，基于vant组件库及使用最新脚手架搭建
08-23
基于vue开发H5，使用vant的UI组件开发界面，该简单模板集合了 1. px自动转化响应式rem单位。更容易更高效开发，像素级还原设计稿； 2. 加入axios请求封装； 3. 简单的api模板； 4. 滚动加载列表示例； 5. 简单页面示例；
vue+vant移动端显示table表格加横向滚动条
最新发布
懒虫的博客
05-30 1054
vant移动端显示table效果，增加复选框，可以进行多选和全选。加横向滚动条，可以看全部内容。 <template> <div class="app-container"> <div class="nav_text" style="position: relative;"> <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="$
H5完整版问卷模板
菜鸟老五
02-04 3568
//如图，根据简要需求拟写一个简单的问卷模板 1.顶部提示文案{根据需求跟换} 2.百分比进度条跟随当前作答进度而改变 3.当前题数/总题数 4.根据索引显示上一题下一题/提交资料 <html data-dpr="1" style="font-size: 37.52px;"> <head> <title>问卷调查</title> <meta charset="utf-8"> <.
vue实现调查问卷一页一题，上一题下一题形式
weixin_45670398的博客
05-18 9569
使用了vant组件的Radio 单选框 官网https://youzan.github.io/vant/#/zh-CN/radio 效果图 效果图 做出来的效果图就是下面那样 一页一题 附上代码： <template> <div class="second"> <!-- 问卷题 --> <div v-for="(item,index) i...
Vue框架分页调研
weixin_44217954的博客
04-28 437
上一页：如果当前页pageNo=1，就不显示上一页按钮，绑定点击事件，点击触发getPageNo自定义事件，把当前页pageNo-1当参数传递回search组件，请求上一页的数据第一页：如果连续页码的起始数字start>1，就显示前面定义好的第一页；小于的话，显示连续页码中的第一页按钮。点击事件同上，由于可能处理选中状态，所以绑定一个类【已经在css中定义好的】，添加选中颜色，当然需要判断是否是选中的页省略...小点：当连续页码的start=3时，显示，也就表示，他们之间还有一页。
vue + vant 实现问卷调查
weixin_52093275的博客
04-04 1118
感觉这个作者的挺好用，记录一下，避免排版。
优化代码==＞常见问卷调查模板，多端通用版本
菜鸟老五
10-26 438
<html data-dpr="1" style="font-size: 37.52px;"> <head> <title>问卷调查</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxim...
div+mui+vue.js 制作问卷调查单页（造的json）
12-28
div+mui+vue.js 制作问卷调查单页,造的json数据，网上找了些问卷demo都不合适，自己做一个！！主要就是用读取json题目和答案，记录答案ID。 一次性去读10道题目，vue.js控制当前题目的显示影藏。上一题 记录 已选择，下一题判断是否选择了。最后弹出框 显示 ，然后 按后台需求提交给后台
vue+vantUI实现单选、多选题（上一题、下一题）
StacyMo的博客
02-25 1761
vue+vantUI实现单选、多选题（上一题、下一题） <template> <div class="exam-online"> <div class="table-list2"> <div v-for="(item,index) in questionList" :key="index"> <div v-if="currentNum===index"> <div slot="ti
Vue.js 实战 问卷调查demo
04-03
Vue.js实战 问卷调查demo， 自己使用vue作用域插槽实现的。2积分就可以了。我改不了啊。是默认5积分吧？？欢迎大家下载。欢迎大家更正
基于移动端的调查问卷javaweb
07-09
基于移动端的调查问卷，为war包下载部署到tomcat可以用。
阿里云javasdk源码-OnlineSurvey:在线调查
06-06
阿里云java sdk源码 Pop Survey简单在线调查工具 1.开发描述 这是一个简单的前后端分离的在线调查工具 前端使用vue.js开发，最终将打包为webapp 前端组件使用有赞的vant组件库 后端使用spring + mybatis进行开发 数据库使用开源关系数据库MySql 数据源与数据监控使用阿里的Druid 后端服务器租用阿里云服务器 短信发送、邮件发送与人脸识别功能均使用阿里的对应服务 如阿里云accessKey等敏感信息本项目单独用了一个配置文件application-privateInfo.yml进行配置，该文件并未上传，需要在后端src/main/resources中新建该文件并添加对应配置。 2.项目简介 开发一个在线调查平台，让用户可以和公司交互，进行反馈。在此平台中，公司用 户可以创建和提交调查问卷给管理员，管理员审核后可批准发布调查，然后用户可以参加调查。 调查结束后，公司用户可以查看调查数据。该项目旨在开发一个平台，使得公司可以提供在线 调查，以获得关于其新产品、现有产品、服务等的反馈。 3.功能需求 3.1用户功能 3.1.1用户注册 用户需要在
基于vue vant实现的地址组件1
04-14
基于vue vant实现的地址组件,地址四级联动,标签选择器,数据为模拟数据,可改成真实接口获取,三级,四级联动均可 查看效果:https://image-static.segmentfault.com/213/641/2136419403-4b050a575db92ae6
vant-shop:基于vant ui的移动端商城项目
05-14
基于vant ui的移动端商城项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for ...
vue使用vant中的checkbox实现全选功能
01-18
本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码，供大家参考，具体内容如下 (item, key=index> class=listli > <p>{{ item.name
微信小程序vant弹窗组件的实现方式
10-15
【微信小程序vant弹窗组件的实现方式】 在前端开发中，弹窗组件是常见的交互元素，用于提供信息提示、用户确认、数据输入等场景。Vant Weapp 是由有赞团队开发的一款专为微信小程序设计的UI组件库，它提供了灵活、...
调研问卷实现的思路
qq_46177396的博客
07-22 190
调研问卷
用vue vantui 写一个问卷调查提交表单
05-28
好的，下面是使用Vue和Vant UI编写问卷调查提交表单的基本流程： 1. 首先，在Vue项目中安装Vant UI并引入相关组件： ``` npm i vant -S ``` ```javascript import Vue from 'vue' import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant) ``` 2. 创建一个包含问卷调查问题的表单组件，其中可以使用Vant UI的各种表单组件，例如`van-radio-group`、`van-checkbox-group`、`van-field`等等。 ```html <template> <van-form @submit="onSubmit"> <van-radio-group v-model="answer1" label="问题1"> <van-radio :name="1" label="答案1">答案1</van-radio> <van-radio :name="1" label="答案2">答案2</van-radio> <van-radio :name="1" label="答案3">答案3</van-radio> </van-radio-group> <van-checkbox-group v-model="answer2" label="问题2"> <van-checkbox :name="2" label="答案1">答案1</van-checkbox> <van-checkbox :name="2" label="答案2">答案2</van-checkbox> <van-checkbox :name="2" label="答案3">答案3</van-checkbox> </van-checkbox-group> <van-field v-model="answer3" label="问题3"></van-field> <van-button type="primary" native-type="submit">提交</van-button> </van-form> </template> <script> export default { data() { return { answer1: '', answer2: [], answer3: '' } }, methods: { onSubmit() { // 提交问卷调查表单 } } } </script> ``` 3. 在表单组件中添加提交表单的方法，可以通过Ajax或者其他方式将表单数据提交到后端服务器。 ```javascript methods: { onSubmit() { const formData = { answer1: this.answer1, answer2: this.answer2, answer3: this.answer3 } // 发送表单数据到后端服务器 axios.post('/api/submit-form', formData).then(response => { // 处理提交成功的情况 }).catch(error => { // 处理提交失败的情况 }) } } ``` 4. 最后，在Vue项目中使用该表单组件。 ```html <template> <div> <QuestionnaireForm /> </div> </template> <script> import QuestionnaireForm from './QuestionnaireForm.vue' export default { components: { QuestionnaireForm } } </script> ``` 以上就是使用Vue和Vant UI编写问卷调查提交表单的基本流程。如果您有任何问题，可以随时向我提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值