首页 > 其他分享 >vue 收集表单数据

vue 收集表单数据

时间:2024-02-19 15:48:23浏览次数:26  
标签:vue 收集 value 表单 勾选 数组 model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>收集表单数据</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            收集表单数据:
                    若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
                    若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。
                    若:<input type="checkbox"/>
                            1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
                            2.配置input的value属性:
                                    (1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
                                    (2)v-model的初始值是数组,那么收集的的就是value组成的数组
                    备注:v-model的三个修饰符:
                                    lazy:失去焦点再收集数据
                                    number:输入字符串转为有效的数字
                                    trim:输入首尾空格过滤
        -->
        <!-- 准备好一个容器-->
        <div id="root">
            <form @submit.prevent="demo">
                账号:<input type="text" v-model.trim="userInfo.account"> <br/><br/>
                密码:<input type="password" v-model="userInfo.password"> <br/><br/>
                年龄:<input type="number" v-model.number="userInfo.age"> <br/><br/>
                性别:
                男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
                女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
                爱好:
                学习<input type="checkbox" v-model="userInfo.hobby" value="study">
                打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
                吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
                <br/><br/>
                所属校区
                <select v-model="userInfo.city">
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                    <option value="wuhan">武汉</option>
                </select>
                <br/><br/>
                其他信息:
                <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
                <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
                <button>提交</button>
            </form>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    age:18,
                    sex:'female',
                    hobby:[],
                    city:'beijing',
                    other:'',
                    agree:''
                }
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userInfo))
                }
            }
        })
    </script>
</html>

 

标签:vue,收集,value,表单,勾选,数组,model
From: https://www.cnblogs.com/testzcy/p/18021240

相关文章

  • 前端知识回顾概览--vue.js 从入门到精通
    vue目前最火的前端框架之一对vue原理有深入了解可以基于vue开发应用对vue3.0有实战经验1. vue.js基础vue.js简介vue.js模版及指令vue.js事件/数据绑定vue.js组件化标签中的新属性vue.js组件生命周期2. vue.js高级用法mixin复用vue.js动画特效&......
  • vite+vue3+ts+ element-plus 5分钟快速搭建高端大气上档次的企业级网站前端框架
    原文地址:https://mp.weixin.qq.com/s/BANsRtNn5u-4521nFwF3FA一、安装需要的包:1、 element-plus 安装命令:npminstallelement-plus--save  2、vue-router安装命令:npminstallvue-router --save  安装完成后,需要到main.ts注册:import{createApp}from......
  • Vite+Vue3+TS创建前端页面,收费教程都没有这么详细
    原文地址:https://mp.weixin.qq.com/s/HqLgf2TCVqnndSxJw_1RTQ一、准备工作在学习之前,需要安装两个工具,一个是IDE,一个是Node.js:VsCode: https://code.visualstudio.com/DownloadNode.js: http://nodejs.cn/download/安装过程略,安装好之后,为了在vscode中能智能提示和运行,......
  • vue实现水平时间轴拖拽功能
    需求介绍因为公司项目中有个摄像头历史录像回放需求功能,需要对过往任意时间段的历史影像进行查看,需要做一个水平方向范围可以拖拽的时间轴,默认所选时间区域为早8点晚18点,左右在拖拽结束的时候直接获取所选区域的开始和结束时间,当拖拽到当天的24点的时候默认tootip展示下一天的0......
  • 几个工具收集(glances,jq)
    glances工具:性能监控,类似top命令,监控cpu,内存,硬盘等性能参数等等yum-yinstallepel-releaseyum-yinstallglances直接执行glancesjq  格式化工具,变成json格式#########变成json格式[root@host101~]#echo'{"name":"阿良","sex":"男","city":&q......
  • vue报错: error:0308010C:digital envelope routines::unsupported
    问题解决参考:https://blog.csdn.net/m0_65933139/article/details/130690790问题描述:报错:Error:error:0308010C:digitalenveloperoutines::unsupported报错原因:因为node.jsV17版本中最近发布的OpenSSL3.0,而OpenSSL3.0对允许算法和密钥大小增加了严格的......
  • 如何实现基于vue技术的管理系统的用户是否登录
    问题:在进行前后端分离开发时候,我们会处理一些前端用户的登录状态。如果用户没有进行登录,则不允许用户访问某些页面一、登录方式首先可以先了解一下前后端分离后的登录方式(1)Cookie+Session(2)Token二、Cookie+SessionHTTP是一种无状态的协议,客户端每次发送请求时,首先要和服务......
  • 垃圾收集2
    1.标记-清除算法算法分为标记和清除两个阶段:首先标记出所有需要回收的对象,在标记完成后,统一回收掉所有被标记的对象,也可以反过来,标记存活的对象,统一回收所有未被标记的对象。标记过程就是对象是否属于垃圾的判定过程。主要缺点有两个:第一个是执行效率不稳定,如果Ja......
  • Vue3实现加入购物车抛物线效果组件
    前言在前几天的一次迭代中,我遇到了这么一个需求,模仿支付宝首页应用中心的编辑功能,支持编辑首页展示的应用,在支付宝应用首页编辑功能中,我注意到一种独特而细致的设计。无论是增加还是移除某个应用,都会引发一个精美的移动动画效果。这种贴心的设计在用户体验中起到了微妙而关键的作......
  • 解决vue2中el-table表格组件的空状态过小的问题
    问题当我们使用element的表格组件的时候,空状态会变的非常瘪,就会造成页面非常难看这样很不美观解决办法可以使用插槽设置空状态,并通过css来调整空状态的样式新建一个空表格<template><div><el-table:data="tableData"stripestyle="width:100%">......