Vue-收集表单信息

news2025/6/1 22:48:34

收集表单信息

Input

  • label for 和 input id 关联, 点击账号标签 也能聚焦 input

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单数据</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>表单数据</h1>
      <div>
        <!-- label for 和 input id 关联, 点击账号标签 也能聚焦 input-->
        <label for="account">账号：</label>
        <input id="account" type="text" v-model="account">
        <br><br>
        <label for="password">密码：</label>
        <input id="password" type="password" v-model="password">
        <br><br>
      </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        account:"",
        password:"",
      },

      methods: {
      },
    });
  </script>
</html>

运行效果

  • 初始化

在这里插入图片描述

  • 填写 账号、密码

在这里插入图片描述

Radio

  • name=‘xxx’ 归为一组 实现互斥选择
  • 指定自定义value值 否则默认为 true/false

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单数据</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>表单数据</h1>
      <div>
        <!-- for 和 id 关联  点击 账号 也能聚焦 input-->
        <label for="account">账号：</label>
        <input id="account" type="text" v-model="account">
        <br><br>
        <label for="password">密码：</label>
        <input id="password" type="password" v-model="password">
        <br><br>
        <label >性别：</label>
        <!-- 
            1. name='sex' 归为一组  实现互斥选择 
            2. 指定自定义value值  否则默认为 true/false
         -->
        <input name="sex" type="radio" value="男" v-model="sex">男
        <input name="sex" type="radio" value="女" v-model="sex">女
        <br><br>
      </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        account:"",
        password:"",
        sex:'',
      },

      methods: {
      },
    });
  </script>
</html>

运行效果

  • 初始化

在这里插入图片描述

  • 选择性别

在这里插入图片描述

Checkbox (多个)

  • 指定自定义value值 否则默认为 true/false
  • 支持多选，需将绑定的变量设置为数组

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单数据</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>表单数据</h1>
      <div>
        <!-- for 和 id 关联  点击 账号 也能聚焦 input-->
        <label for="account">账号：</label>
        <input id="account" type="text" v-model="account">
        <br><br>
        <label for="password">密码：</label>
        <input id="password" type="password" v-model="password">
        <br><br>
        <label >性别：</label>
        <!-- 
            1. name='sex' 归为一组  实现互斥选择 
            2. 指定自定义value值  否则默认为 true/false
         -->
        <input name="sex" type="radio" value="男" v-model="sex">男
        <input name="sex" type="radio" value="女" v-model="sex">女
        <br><br>
        <label >爱好：</label>
        <!-- 
            1. 指定自定义value值  否则默认为 true/false
            2. 支持多选，需将绑定的变量设置为数组 hobby=[]
         -->
        <input  type="checkbox" value="爬山" v-model="hobby">爬山
        <input  type="checkbox" value="健身" v-model="hobby">健身
        <input  type="checkbox" value="唱歌" v-model="hobby">唱歌
        <br><br>
         <!--
        <label >所属地区：</label>
        <select v-model="city">
            <option value="">请选择地区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br><br>
        <label >描述信息：</label>
        <textarea v-model="description"></textarea>
        <br><br>
        <input  type="checkbox" v-model="read">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
        <br><br>
        <button @click="submit">注册</button> -->
      </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        account:"",
        password:"",
        sex:'',
        hobby:[],
        city:"",
        description:'',
        read:""

      },

      methods: {
        submit(){

        }
      },
    });
  </script>
</html>

运行效果

  • 初始化

在这里插入图片描述

  • 选择爱好

在这里插入图片描述

Select

  • 单选，必须指定自定义value值

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单数据</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>表单数据</h1>
      <div>
        <!-- for 和 id 关联  点击 账号 也能聚焦 input-->
        <label for="account">账号：</label>
        <input id="account" type="text" v-model="account">
        <br><br>
        <label for="password">密码：</label>
        <input id="password" type="password" v-model="password">
        <br><br>
        <label >性别：</label>
        <!-- 
            1. name='sex' 归为一组  实现互斥选择 
            2. 指定自定义value值  否则默认为 true/false
         -->
        <input name="sex" type="radio" value="男" v-model="sex">男
        <input name="sex" type="radio" value="女" v-model="sex">女
        <br><br>
        <label >爱好：</label>
        <!-- 
            1. 指定自定义value值  否则默认为 true/false
            2. 支持多选，需将绑定的变量设置为数组 hobby=[]
         -->
        <input  type="checkbox" value="爬山" v-model="hobby">爬山
        <input  type="checkbox" value="健身" v-model="hobby">健身
        <input  type="checkbox" value="唱歌" v-model="hobby">唱歌
        <br><br>
        <label >所属地区：</label>
        <!-- 
            单选 指定自定义value值  
         -->
        <select v-model="city">
            <option value="">请选择地区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br><br>
      </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        account:"",
        password:"",
        sex:'',
        hobby:[],
        city:"",
      },

      methods: {
      },
    });
  </script>
</html>

运行效果

  • 初始化

在这里插入图片描述

  • 选择地区

在这里插入图片描述

Textarea

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单数据</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>表单数据</h1>
      <div>
        <!-- for 和 id 关联  点击 账号 也能聚焦 input-->
        <label for="account">账号：</label>
        <input id="account" type="text" v-model="account">
        <br><br>
        <label for="password">密码：</label>
        <input id="password" type="password" v-model="password">
        <br><br>
        <label >性别：</label>
        <!-- 
            1. name='sex' 归为一组  实现互斥选择 
            2. 指定自定义value值  否则默认为 true/false
         -->
        <input name="sex" type="radio" value="男" v-model="sex">男
        <input name="sex" type="radio" value="女" v-model="sex">女
        <br><br>
        <label >爱好：</label>
        <!-- 
            1. 指定自定义value值  否则默认为 true/false
            2. 支持多选，需将绑定的变量设置为数组 hobby=[]
         -->
        <input  type="checkbox" value="爬山" v-model="hobby">爬山
        <input  type="checkbox" value="健身" v-model="hobby">健身
        <input  type="checkbox" value="唱歌" v-model="hobby">唱歌
        <br><br>
        <label >所属地区：</label>
        <!-- 
            单选 指定自定义value值  
         -->
        <select v-model="city">
            <option value="">请选择地区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br><br>
        <label >描述信息：</label>
        <textarea v-model="description"></textarea>
        <br><br>
      </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        account:"",
        password:"",
        sex:'',
        hobby:[],
        city:"",
        description:''
      },

      methods: {
      },
    });
  </script>
</html>

运行效果

  • 初始化

在这里插入图片描述

  • 输入信息

在这里插入图片描述

Checkbox（单个）

  • 就是要值是true/false, 因此无需自定义value

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单数据</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>表单数据</h1>
      <div>
        <!-- for 和 id 关联  点击 账号 也能聚焦 input-->
        <label for="account">账号：</label>
        <input id="account" type="text" v-model="account">
        <br><br>
        <label for="password">密码：</label>
        <input id="password" type="password" v-model="password">
        <br><br>
        <label >性别：</label>
        <!-- 
            1. name='sex' 归为一组  实现互斥选择 
            2. 指定自定义value值  否则默认为 true/false
         -->
        <input name="sex" type="radio" value="男" v-model="sex">男
        <input name="sex" type="radio" value="女" v-model="sex">女
        <br><br>
        <label >爱好：</label>
        <!-- 
            1. 指定自定义value值  否则默认为 true/false
            2. 支持多选，需将绑定的变量设置为数组 hobby=[]
         -->
        <input  type="checkbox" value="爬山" v-model="hobby">爬山
        <input  type="checkbox" value="健身" v-model="hobby">健身
        <input  type="checkbox" value="唱歌" v-model="hobby">唱歌
        <br><br>
        <label >所属地区：</label>
        <!-- 
            单选 指定自定义value值  
         -->
        <select v-model="city">
            <option value="">请选择地区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br><br>
        <label >描述信息：</label>
        <textarea v-model="description"></textarea>
        <br><br>
        <input  type="checkbox" v-model="read">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
        <br><br>
        <button @click="submit">提交</button> 
      </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        account:"",
        password:"",
        sex:'',
        hobby:[],
        city:"",
        description:'',
        read:""
      },

      methods: {
        submit(){
            console.log("----------------提交表单了----------------")
            console.log("账号：" + this.account)
            console.log("密码：" + this.password)
            console.log("性别：" + this.sex)
            console.log("爱好：" + this.hobby)
            console.log("地区：" + this.city)
            console.log("描述：" + this.description)
            console.log("已读协议：" + this.read)
        }
      },
    });
  </script>
</html>

运行效果

  • 初始化

在这里插入图片描述

  • 选中已读

在这里插入图片描述

  • 填写表单信息并提交
    在这里插入图片描述

特殊说明

  • v-model.number ： 保证收集到的数据为数字
  • v-model.lazy ： 失去焦点再去收集数据
  • v-model.trim ：收集到的数据去除了前后空格

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2393267.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vscode开发stm32，main.c文件中出现很多报错影响开发解决日志

vscode开发stm32，main.c文件中出现很多报错影响开发解决日志

本质上为 .vscode/c_cpp_properties.json文件和Makefile文件中冲突&#xff0c;两者没有同步。 将makefile文件中的内容同步过来即可&#xff0c;下面给出一个json文件的模板&#xff0c;每个人的情况不同&#xff0c;针对性修改即可 {"configurations": [{"na…
阅读更多...
嵌入式鸿蒙系统中水平和垂直以及图片调用方法

嵌入式鸿蒙系统中水平和垂直以及图片调用方法

利用openharmony操作的具体现象： 第一：Column 作用：沿垂直方向布局的容器。 第二：常用接口 Column(value?: {space?: string | number}) 参数： 参数名参数类型必填参数描述spacestring | number否纵向布局元素垂直方向间距。 从API version 9开始，space为负数或者ju…
阅读更多...
【海康USB相机被HALCON助手连接过后，MVS显示无法连接故障。】

【海康USB相机被HALCON助手连接过后，MVS显示无法连接故障。】

在Halcon里使用助手调用海康USB相机时&#xff0c;如果这个界面点击了【是】 那么恭喜你&#xff0c;相机只能被HALCON调用使用&#xff0c;使用MVS或者海康开发库&#xff0c;将查找不到相机 解决方式&#xff1a; 右键桌面【此电脑】图标 ->选择【管理】 ->选择【设备…
阅读更多...
2025年电气工程与轨道交通国际会议：绿色能源与智能交通的创新之路

2025年电气工程与轨道交通国际会议：绿色能源与智能交通的创新之路

2025年电气工程与轨道交通国际会议&#xff08;ICEERT 2025&#xff09;是一场电气工程与轨道交通领域的国际盛会&#xff0c;将于2025年在武汉隆重召开。此次会议汇聚了全球顶尖的专家学者和行业精英&#xff0c;共同探讨电气工程与轨道交通的最新研究成果和技术趋势。会议将围…
阅读更多...
WPF log4net用法

WPF log4net用法

WPF log4net用法 一、在工程中管理NuGet程序包&#xff0c;找到log4net&#xff0c;点击安装&#xff0c;如下图已成功安装&#xff1b; 二、在工程中右键添加新建项&#xff0c;选择应用程序配置文件&#xff08;后缀为.config&#xff09;,然后设置名称&#xff0c;这里设置…
阅读更多...
数字孪生数据监控如何提升汽车零部件工厂产品质量

数字孪生数据监控如何提升汽车零部件工厂产品质量

一、汽车零部件工厂的质量挑战 汽车零部件作为汽车制造的基础&#xff0c;其质量直接关系到整车的性能、可靠性和安全性。在传统的汽车零部件生产过程中&#xff0c;质量问题往往难以在早期阶段被发现和解决&#xff0c;导致生产效率低下、生产成本上升&#xff0c;甚至影响到…
阅读更多...
贪心算法实战3

贪心算法实战3

文章目录 前言区间问题跳跃游戏跳跃游戏II用最少数量的箭引爆气球无重叠区间划分字母区间合并区间 最大子序和加油站监控二叉树 前言 今天继续带大家进行贪心算法的实战篇3&#xff0c;本章注意来解答一些运用贪心算法的比较难的问题&#xff0c;大家好好体会&#xff0c;怎么…
阅读更多...
实测，大模型谁更懂数据可视化？

实测，大模型谁更懂数据可视化？

大家好&#xff0c;我是 Ai 学习的老章 看论文时&#xff0c;经常看到漂亮的图表&#xff0c;很多不知道是用什么工具绘制的&#xff0c;或者很想复刻类似图表。 实测&#xff0c;大模型 LaTeX 公式识别&#xff0c;出乎预料 前文&#xff0c;我用 Kimi、Qwen-3-235B-A22B、…
阅读更多...
Linux入门(十一)进程管理

Linux入门(十一)进程管理

Linux 中每个执行的程序都称为一个进程&#xff0c;每个进程都分配一个ID号&#xff08;PID&#xff09; 每个进程都可能以两种方式存在&#xff0c;前台&#xff08;屏幕上可以操作的&#xff09;和后台&#xff08;屏幕上无法看到的&#xff09;&#xff0c;一般系统的服务都…
阅读更多...
【技能篇】RabbitMQ消息中间件面试专题

【技能篇】RabbitMQ消息中间件面试专题

1. RabbitMQ 中的 broker 是指什么&#xff1f;cluster 又是指什么&#xff1f; 2. 什么是元数据&#xff1f;元数据分为哪些类型&#xff1f;包括哪些内容&#xff1f;与 cluster 相关的元数据有哪些&#xff1f;元数据是如何保存的&#xff1f;元数据在 cluster 中是如何分布…
阅读更多...
Linux研学-环境搭建

Linux研学-环境搭建

一 概述 1 Linux 概述 Linux系统由内核、Shell、文件系统、应用程序及系统库等关键部分组成。内核作为核心&#xff0c;管理硬件资源与系统服务&#xff1b;Shell提供用户与系统交互的命令行界面&#xff0c;让用户能便捷执行操作&#xff1b;文件系统负责数据的存储、组织与管…
阅读更多...
Ubuntu系统下可执行文件在桌面单击运行教程

Ubuntu系统下可执行文件在桌面单击运行教程

目录 ​编辑 操作环境&#xff1a;这个可执行文件在原目录下还有它的依赖文件 1&#xff0c;方法1&#xff1a;创建启动脚本 操作步骤​&#xff1a; &#xff08;1&#xff09;​​在桌面创建脚本文件​​&#xff08;如 run_main_improve.sh&#xff09;&#xff1a; ​…
阅读更多...
Linux之文件进程间通信信号

Linux之文件进程间通信信号

Linux之文件&进程间通信&信号 文件文件描述符文件操作重定向缓冲区一切皆文件的理解文件系统磁盘物理结构&块文件系统结构 软硬链接 进程间通信匿名管道命名管道system V共享内存 信号 文件 首先&#xff0c;Linux下一切皆文件。对于大量的文件&#xff0c;自然要…
阅读更多...
代码随想录算法训练营 Day61 图论ⅩⅠ Floyd A※ 最短路径算法

代码随想录算法训练营 Day61 图论ⅩⅠ Floyd A※ 最短路径算法

图论 题目 97. 小明逛公园 本题是经典的多源最短路问题。 在这之前我们讲解过&#xff0c;dijkstra朴素版、dijkstra堆优化、Bellman算法、Bellman队列优化&#xff08;SPFA&#xff09; 都是单源最短路&#xff0c;即只能有一个起点。 而本题是多源最短路&#xff0c;即求多…
阅读更多...
改写自己的浏览器插件工具 myChromeTools

改写自己的浏览器插件工具 myChromeTools

1. 起因&#xff0c; 目的: 前面我写过&#xff0c; 自己的一个浏览器插件小工具 最近又增加一个小功能&#xff0c;可以自动滚动页面&#xff0c;尤其是对于那些瀑布流加载的网页。最新的代码都在这里 2. 先看效果 3. 过程: 代码 1, 模拟鼠标自然滚动 // 处理滚动控制逻辑…
阅读更多...
python-pptx去除形状默认的阴影

python-pptx去除形状默认的阴影

文章目录 效果原理1. 阴影继承机制解析2. XML层操作细节3. 注意事项 扩展应用1. 批量去除阴影2. 复合效果控制 效果 右边这个是直接添加一个形状。可以看到它会默认被赋予一个阴影。 然而&#xff0c;这个东西在特定的场合&#xff0c;其实是我们所不需要的。 那怎么把这个阴…
阅读更多...
kuboard自带ETCD存储满了处理方案

kuboard自带ETCD存储满了处理方案

一、前言 当运行 ETCD 日志报 Erro: mvcc database space exceeded 时&#xff0c;说明 ETCD 存储不足了&#xff08;默认 ETCD 存储是 2G&#xff09;&#xff0c;配额会触发告警&#xff0c;然后 Etcd 系统将进入操作受限的维护模式。 通过下面命令可以查看 ETCD 存储使用情…
阅读更多...
SpringBoot+tabula+pdfbox解析pdf中的段落和表格数据

SpringBoot+tabula+pdfbox解析pdf中的段落和表格数据

一、前言 在日常业务需求中&#xff0c;往往会遇到解析pdf文件中的段落或者表格数据的需求。 常见的做法是使用 pdfbox 来做&#xff0c;但是它只能提取文本数据&#xff0c;没有我们在文件页面上面的那种结构化组织&#xff0c;文本通常是散乱的包含各种换行回车空格等格式&a…
阅读更多...
GitHub push失败解决办法-fatal: unable to access ‘https://github.com/xxx

GitHub push失败解决办法-fatal: unable to access ‘https://github.com/xxx

问题描述&#xff1a; 问题解决&#xff1a; 1、首先查找自己电脑的代理地址和端口 windows教程如下&#xff1a; 1、搜索控制面板-打开Internet选项 2、点击局域网设置&#xff1a; 3、如图为地址和端口号 即可获得本机地址和端口号 2、根据上一步获得的本机地址和端口号为…
阅读更多...
电商平台 API、数据抓取与爬虫技术的区别及优势分析

电商平台 API、数据抓取与爬虫技术的区别及优势分析

一、技术定义与核心原理 电商平台 API&#xff08;应用程序编程接口&#xff09; 作为平台官方提供的标准化数据交互通道&#xff0c;API 通过 HTTP 协议实现不同系统间的结构化数据传输。开发者需申请授权&#xff08;如 API 密钥&#xff09;&#xff0c;按照文档规范调用接口…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023