vue获取表格数据,vue 提交表单数据
这篇文章主要为大家介绍了某视频剪辑软件获取表单数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
目录
需求获取数据并提交模板过滤器过滤器的使用场景总结
需求
使用Vue收集如下用户数据：
获取数据并提交
代码实现：
将价值的值与变量属性进行绑定
v型车。trim= username去除两端空格
v型车。number= age将字符串转为数值
v型车。懒=‘年龄’；不是立即收集，而是切换焦点后收集
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题获取表单数据/标题
脚本src=/static/js/vue。js /脚本
/头
身体
div id=容器
表单操作= @submit.prevent=submit
=用户名的标签用户名：/labelbr
输入类型= text class= username name= username placeholder=输入用户名 v-model.lazy=用户。用户名英国铁路公司
=密码的标签密码：/labelbr
输入type= password class= password name= password placeholder=输入密码v-model=user.passwordbr
=年龄的标签年龄：/labelbr
！-类型是数字，只允许输入数字；投入中也是字符串-
！- v型车型号，将投入的字符串转为数值-
输入类型=数字名称=年龄虚拟模型。number= user。年龄br
= 的标签性别：/标签
！-非正常的输入-
输入类型=广播名称=性别五-模型=用户。性别值=女性女
输入类型=广播名称=性别五-模型=用户。性别值=男性男
英国铁路公司
！-多选-
= 的标签爱好：/标签
输入类型=复选框v-model=用户。爱好值=乒乓乒乓球
输入类型=复选框v-model=用户。爱好值=篮球篮球
输入类型=复选框v-model=用户。爱好值=足球足球
英国铁路公司
！-下拉选框-
跨度选择城市：/spanbr
select name= city v-model= user。城市 id=
选项值= 选择城市/选项
选项值=zz 郑州/选项
选项值=wh 武汉/选项
选项值=bj 北京/选项
/选择
英国铁路公司
！-文本框-
= 的标签描述：/labelbr
textarea name= desc v-model=用户。desc /textarea
英国铁路公司
！-协议-
输入类型=复选框名称=同意v-model=用户。同意阅读并接受a href=http://www。百度。com 《用户协议》 /a
！-点击按钮提交-
button :style={display:block ，backgroundColor:lightblue ，} 提交/按钮
！-提交提交-
！-输入类型=提交值=提交-
/表单
/div
脚本
Vue.config.productionTip=false
新Vue({
埃尔： #集装箱，
数据：{
用户：{
用户名： ,
密码： ,
年龄： ,
性别： ,
爱好：[],
城市： ,
desc: ，
同意： ,
}
},
方法：{
提交（事件){
console.log(提交表单)
//在形式内，参数自动提交
控制台。log(JSON。stringify(这个。用户))
},
},
})
/脚本
/body
/html
模板过滤器
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题模板过滤器/标题
脚本src=/static/js/vue。js /脚本
脚本src=/static/js/day js。量滴js /脚本
/头
身体
div id=容器
！-过滤器-
span { { time time formatter } }/span br
！-传参数的过滤器第一个参数永远是管道数据-
span { { time time formatter( YY-MM-DD hh:MM:ss )} }/span
！-也可以多个过滤器串联-
/div
脚本
Vue.config.productionTip=false
//全局过滤器，所有组件中都可以使用
Vue.filter(myFilter ，函数（值){
返回全局过滤
})
新Vue({
埃尔： #集装箱，
数据：{
时间：1639579694662,//时间戳，不是字符串
},
//局部过滤器，组件内部使用
过滤器：{
时间格式化程序(时间，格式){
//第一个参数
如果(格式){
返回日期（时间)。格式（格式)
}否则{
返回日期（时间)。格式(“YYYY-MM-DD HH:mm:ss”)
}
},
},
})
/脚本
/body
/html
过滤器的使用场景
1.插值语法中使用
2.v-bind:属性= xx xx
处理一些简单的操作，产生了新数据
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。