Vue获取表单数据的方法

2024-12-01 00:19:16

需求

使用Vue收集如下用户数据：

获取数据并提交

代码实现：

将value的值与变量属性进行绑定

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

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

v-model.lazy = ‘age' ； 不是立即收集，而是切换焦点后收集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取表单数据</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>
    <div id="container">
        <form action="" @submit.prevent="submit">
            <label for="username">用户名:</label><br>
            <input type="text" class="username" name="username" placeholder="输入用户名" v-model.lazy="user.username"><br>
            <label for="password">密码:</label><br>
            <input type="password" class='password' name="password" placeholder="输入密码" v-model="user.password"><br>
            <label for="age">年龄:</label><br>
            <!-- type is number，只允许输入数字；input中也是字符串 -->
            <!-- v-model.number，将input的字符串转为数值 -->
            <input type="number" name="age" v-model.number="user.age"><br>
            <label for="">性别:</label>
            <!-- 非正常的input -->
            <input type="radio" name="sex" v-model="user.sex" value="female">女
            <input type="radio" name="sex" v-model="user.sex" value="male">男
            <br>
            <!-- 多选 -->
            <label for="">爱好:</label>
            <input type="checkbox" v-model="user.hobby" value="pingpong">乒乓球
            <input type="checkbox" v-model="user.hobby" value="basketball">篮球
            <input type="checkbox" v-model="user.hobby" value="football">足球
            <br>
            <!-- 下拉选框 -->
            <span>选择城市:</span><br>
            <select name="city" v-model="user.city" id="">
                <option value="">选择城市</option>
                <option value="zz">郑州</option>
                <option value="wh">武汉</option>
                <option value="bj">北京</option>
            </select>
            <br>
            <!-- 文本框 -->
            <label for="">描述:</label><br>
            <textarea name="desc" v-model="user.desc"></textarea>
            <br>
            <!-- 协议 -->
            <input type="checkbox" name="agree" v-model="user.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
            <!-- 点击按钮 提交 -->
            <button :style="{display:'block',backgroundColor:'lightblue',}">提交</button>
            <!-- submit 提交 -->
            <!-- <input type="submit" value="提交"> -->
        </form>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el: "#container",
            data: {
                user: {
                    username: "",
                    password: "",
                    age: "",
                    sex: "",
                    hobby: [],
                    city: "",
                    desc: "",
                    agree: "",
                }
            },
            methods: {
                submit(event){
                    console.log("提交表单")
                    // 在form内，参数自动提交
                    console.log(JSON.stringify(this.user))
                },
            },
        })
    </script>
</body>
</html>

模板过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板过滤器</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/dayjs.min.js"></script>
</head>
<body>
    <div id="container">
        <!-- 过滤器 -->
        <span>{{ time | timeFormatter}}</span><br>
        <!-- 传参数的过滤器 第一个参数永远是管道数据-->
        <span>{{ time | timeFormatter("YY-MM-DD hh:mm:ss")}}	</span>
        <!--也可以多个过滤器串联-->
    </div>
    <script>
        Vue.config.productionTip = false
        //全局过滤器，所有组件中都可以使用
        Vue.filter("myFilter", function(value){
        	return '全局过滤'
        })
        new Vue({
            el: "#container",
            data: {
                time: 1639579694662, //时间戳，不是字符串
            },
			//局部过滤器，组件内部使用
            filters: {
                timeFormatter(time, format){
                    // 第一个参数
                    if(format){
                        return dayjs(time).format(format)
                    }else{
                        return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
                    }
                },
            },
        })
    </script>
</body>
</html>

过滤器的使用场景

1.插值语法中使用

2.v-bind：属性 =‘ xx| xx '

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

总结

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

vue实现表单数据验证的实例代码

为el-form表单添加:rules 在data中定义规则将定义的规则绑定在el-form-item 代码如下:  <el-form :model="loginForm" label-width="0px" class="login_form" :rules="loginFormRules">  <el-form-item prop=&q
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
Vue之表单事件数据绑定详解

<body> <div id="root"> <form action="" @submit.prevent="demo"> <label for="TW"> 姓名:</label> <input type="text" id="TW" v-model.trim="userInfo.account"&g
Vue表单控件数据绑定方法详解

基础用法可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value.checked.selected特性的初始值.因为它会选择Vue实例数据来作为具体的值.应该通过JS组件的data选项中声明初始值 type:text <div id="example"> <input v-model="
详细分析vue表单数据的绑定

v-model的基本用法一.本节说明前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做我们通过v-model实现一个简单的需求通过表单input绑定模型数据message,表单数据变化data.message也发生变化然后通过Mustache表达式,将变化之后的message数据显示到视图页面上三.
Vue获取表单数据的方法

目录需求获取数据并提交模板过滤器过滤器的使用场景总结需求使用Vue收集如下用户数据: 获取数据并提交代码实现: 将value的值与变量属性进行绑定 v-model.trim = 'username' ; 去除两端空格 v-model.number = 'age':将字符串转为数值 v-model.lazy = 'age' : 不是立即收集,而是切换焦点后收集 <!DOCTYPE html> <html lang="en"> <head>
Yii2基于Ajax自动获取表单数据的方法

本文实例讲述了Yii2基于Ajax自动获取表单数据的方法.分享给大家供大家参考,具体如下: 这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gii生成 yii2advanced.customers表 customer_id:int(11) customer_name:varchar(100) zip_code:varchar(20) city:varchar(100) province:varchar(100) yii2advanced.l
nodejs获取表单数据的三种方法实例

前言 nodejs作为服务端语言,在开发中注册登录等需通过form表单向后端发送数据进行判断,那作为服务端语言的nodejs通过哪些方法可以接收调用form表单的post请求值呢. 常见的会用到以下三种,让我们对着例子看看具体用法. 后端我们使用express插件,需要对express有所了解的才便于阅读哦~ 1.首先npm初始化,下载express包,导入模块后创建服务对象 //导入express模块 const express = require("express"); // 创建
Vue 收集表单数据方法详情

表单收集数据代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初识</title> <script type="text/javascript" src="./js/vue.js"></script> </head>
Javaweb中Request获取表单数据的四种方法详解

目录表单代码 request.getParamter(String name);通过name获取值 request.getParamterValues(String name);通过name获取value值(一般用于复选框获取值) 代码片段 request.getParameterNames();直接获取表单所有对象的name值,返回值是枚举集合 request.getParameterMap();直接获取表单所有对象的name值以及数据表单代码 <!DOCTYPE html> <h
Javaweb获取表单数据的多种方式

Javaweb获取表单数据的几种方式一.通过键值对的形式获取表单数据 getParameter(String name):通过key,返回一个value. getParameterValues(String name):通过key返回一个string数组(多个值) getParameterNames():返回form表单中的所有key值. 下面介绍通过键值对获取form表单数据的数据的方法: @WebServlet({ "/FormServlet", "/form"
Servlet的5种方式实现表单提交（注册小功能），后台获取表单数据实例

用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form action="/RequestDemo/RequestDemo3"
vue实现表单数据的增删改功能

本文实例为大家分享了vue实现表单数据增删改功能的具体代码,供大家参考,具体内容如下图示如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu
vue获取当前激活路由的方法

一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录). route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象. route object 出现在多个地方: 在组件内,即 this.$route 在 $route 观察者回调内 router.match(location) 的返回值 (在main.js可以获取当前激活路由信息)
策略模式实现 Vue 动态表单验证的方法

策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法.关键是策略的实现和使用分离 . 注意:本文可能用到一些编码技巧比如 IIFE(Immediately Invoked Function Expression, 立即调用函数表达式),ES6 的语法 let/const.箭头函数.rest 参数,短路运算符等,如果还没接触过可以点击链接稍加学习 ~ 1. 你曾

Vue获取表单数据的方法

目录

需求

获取数据并提交

模板过滤器

过滤器的使用场景

总结

相关推荐

随机推荐