耀极客论坛

 找回密码
 立即注册
查看: 523|回复: 0

Vue获取表单数据的方法

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:59:21 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了Vue获取表单数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

需求
  使用Vue收集如下用户数据:



获取数据并提交
  代码实现:
  将value的值与变量属性进行绑定

  v-model.trim = ‘username' ; 去除两端空格

  v-model.number = ‘age';将字符串转为数值

  v-model.lazy = ‘age' ; 不是立即收集,而是切换焦点后收集
  1. ‹!DOCTYPE html>
  2. ‹html lang="en">
  3. ‹head>
  4.     ‹meta charset="UTF-8">
  5.     ‹meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     ‹meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     ‹title>获取表单数据‹/title>
  8.     ‹script src="/static/js/vue.js">‹/script>
  9. ‹/head>
  10. ‹body>
  11.     ‹div id="container">
  12.         ‹form action="" @submit.prevent="submit">
  13.             ‹label for="username">用户名:‹/label>‹br>
  14.             ‹input type="text" class="username" name="username" placeholder="输入用户名" v-model.lazy="user.username">‹br>
  15.             ‹label for="password">密码:‹/label>‹br>
  16.             ‹input type="password" class='password' name="password" placeholder="输入密码" v-model="user.password">‹br>
  17.             ‹label for="age">年龄:‹/label>‹br>
  18.             ‹!-- type is number,只允许输入数字;input中也是字符串 -->
  19.             ‹!-- v-model.number,将input的字符串转为数值 -->
  20.             ‹input type="number" name="age" v-model.number="user.age">‹br>
  21.             ‹label for="">性别:‹/label>
  22.             ‹!-- 非正常的input -->
  23.             ‹input type="radio" name="sex" v-model="user.sex" value="female">女
  24.             ‹input type="radio" name="sex" v-model="user.sex" value="male">男
  25.             ‹br>
  26.             ‹!-- 多选 -->
  27.             ‹label for="">爱好:‹/label>
  28.             ‹input type="checkbox" v-model="user.hobby" value="pingpong">乒乓球
  29.             ‹input type="checkbox" v-model="user.hobby" value="basketball">篮球
  30.             ‹input type="checkbox" v-model="user.hobby" value="football">足球
  31.             ‹br>
  32.             ‹!-- 下拉选框 -->
  33.             ‹span>选择城市:‹/span>‹br>
  34.             ‹select name="city" v-model="user.city" id="">
  35.                 ‹option value="">选择城市‹/option>
  36.                 ‹option value="zz">郑州‹/option>
  37.                 ‹option value="wh">武汉‹/option>
  38.                 ‹option value="bj">北京‹/option>
  39.             ‹/select>
  40.             ‹br>
  41.             ‹!-- 文本框 -->
  42.             ‹label for="">描述:‹/label>‹br>
  43.             ‹textarea name="desc" v-model="user.desc">‹/textarea>
  44.             ‹br>
  45.             ‹!-- 协议 -->
  46.             ‹input type="checkbox" name="agree" v-model="user.agree">阅读并接受‹a href="http://www.baidu.com">《用户协议》‹/a>
  47.             ‹!-- 点击按钮 提交 -->
  48.             ‹button :style="{display:'block',backgroundColor:'lightblue',}">提交‹/button>
  49.             ‹!-- submit 提交 -->
  50.             ‹!-- ‹input type="submit" value="提交"> -->
  51.         ‹/form>
  52.     ‹/div>
  53.     ‹script>
  54.         Vue.config.productionTip = false
  55.         new Vue({
  56.             el: "#container",
  57.             data: {
  58.                 user: {
  59.                     username: "",
  60.                     password: "",
  61.                     age: "",
  62.                     sex: "",
  63.                     hobby: [],
  64.                     city: "",
  65.                     desc: "",
  66.                     agree: "",
  67.                 }
  68.             },
  69.             methods: {
  70.                 submit(event){
  71.                     console.log("提交表单")
  72.                     // 在form内,参数自动提交
  73.                     console.log(JSON.stringify(this.user))
  74.                 },
  75.             },
  76.         })
  77.     ‹/script>
  78. ‹/body>
  79. ‹/html>
复制代码
模板过滤器
  1. ‹!DOCTYPE html>
  2. ‹html lang="en">
  3. ‹head>
  4.     ‹meta charset="UTF-8">
  5.     ‹meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     ‹meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     ‹title>模板过滤器‹/title>
  8.     ‹script src="/static/js/vue.js">‹/script>
  9.     ‹script src="/static/js/dayjs.min.js">‹/script>
  10. ‹/head>
  11. ‹body>
  12.     ‹div id="container">
  13.         ‹!-- 过滤器 -->
  14.         ‹span>{{ time | timeFormatter}}‹/span>‹br>
  15.         ‹!-- 传参数的过滤器 第一个参数永远是管道数据-->
  16.         ‹span>{{ time | timeFormatter("YY-MM-DD hh:mm:ss")}}‹/span>
  17.         ‹!--也可以多个过滤器串联-->
  18.     ‹/div>
  19.     ‹script>
  20.         Vue.config.productionTip = false
  21.         //全局过滤器,所有组件中都可以使用
  22.         Vue.filter("myFilter", function(value){
  23.         return '全局过滤'
  24.         })
  25.         new Vue({
  26.             el: "#container",
  27.             data: {
  28.                 time: 1639579694662, //时间戳,不是字符串
  29.             },
  30. //局部过滤器,组件内部使用
  31.             filters: {
  32.                 timeFormatter(time, format){
  33.                     // 第一个参数
  34.                     if(format){
  35.                         return dayjs(time).format(format)
  36.                     }else{
  37.                         return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
  38.                     }
  39.                 },
  40.             },
  41.         })
  42.     ‹/script>
  43. ‹/body>
  44. ‹/html>
复制代码
过滤器的使用场景
  1.插值语法中使用
  2.v-bind:属性 =‘ xx| xx '

  处理一些简单的操作,产生了新数据

总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:59 , Processed in 0.065332 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表