Vue获取表单数据的方法
更新时间：2021年12月17日 16:20:11 作者：laufing
这篇文章主要为大家介绍了Vue获取表单数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
需求
使用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 '
处理一些简单的操作，产生了新数据
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要介绍了vue3时间戳转换， vue2转换时间戳的时候一般使用过滤器的方式，到vue3之后，vue3移除了过滤器，就不能再用了，官方是推荐使用方法或者计算属性的方式。下面我们来看看详细介绍吧</P><P>2021-12-12
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧2021-07-07
这篇文章主要介绍了vue-cli3设置代理无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要给大家介绍了关于vue打开其他项目页面并传入数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了Vue实现接口进度条功能，在请求数据的过程中，需要添加监听函数来监测数据请求的过程变化，并更新组件相应的属性和界面元素,本文结合实例代码详细讲解，需要的朋友可以参考下2023-04-04
Vue3利用组合式函数和Shared Worker实现后台分片上传
这篇文章主要为大家详细介绍了Vue3如何利用组合式函数和Shared Worker实现后台分片上传(带哈希计算),感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
vue 生成gzip压缩包部署到nginx服务器，如果我们把web网站资源进行gzip压缩后进行传输给浏览器，这样就能加快网站资源的加载速度，这篇文章主要介绍了vue生成gzip压缩包部署到nginx,需要的朋友可以参考下2022-12-12
vue+elementui 实现新增和修改共用一个弹框的完整代码
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI ，今天给大家普及vue+elementui 实现新增和修改共用一个弹框的完整代码，一起看看吧2021-06-06
下面小编就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论