Vue-表单提交
template
<form @submit.prevent="submitFrom">
<!-- 注册提交事件 .prevent 阻止表单的默认提交行为 -->
简单输入:
<input type="text" v-model="formData.name">
单选:
<input type="radio" v-model="formData.open" value="1"> 开
<input type="radio" v-model="formData.open" value="0"> 关
多选:
<input type="checked" v-model="formData.huolg"/> 火龙果
<input type="checked" v-model="formData.yezi"/> 椰子
下拉选择框:
<select v-model="formData.weidao">
<option value="xl">香辣</option>
<option value="ml">麻辣</option>
<option value="qt">清汤</option>
<option value="yy">鸳鸯</option>
</select>
<button type="submit" value="确定"></button>
</form>
script
export default {
data() {
return {
formData: {
name: "",
opn: "",
huolg: "",
yezi: "",
weidao: "",
}
};
},
methods: {
submitFrom() {
console.log(this.formData);
}
},
}
Vue-表单提交的更多相关文章
- vue之回车触发表单提交
vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...
- 如何用elementui去实现图片上传和表单提交,用axios的post方法
下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...
- 小程序 <web-view></web-view> 中使用 form 表单提交
在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...
- vue表单控件绑定(表单数据的自动收集)
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- vue---阻止默认表单提交的三种方法
vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...
- vue 表单校验(二)
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- 表单提交数据格式form data
前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交 ...
- vue表单校验(三)
vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- from表单提交数据之后,后台对象接受不到值
如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...
随机推荐
- ASP.NET Core Web API中Startup的使用技巧
Startup类和服务配置 STARTUP CLASS AND THE SERVICE CONFIGURATION 在 Startup 类中,有两个方法:ConfigureServices 是用于 ...
- RPA项目所遇知识点
1艺赛旗 RPA 技术分享常见问题汇总贴 2python标准库之glob介绍 3RPA基础 4RPA答疑 5python3 遍历windows下 所有句柄及窗口名称 import win32gui h ...
- 每天一个linux命令--ssh的host配置用户名密码
1.在终端输入 cd ~/.ssh/ vi config 输入服务器的用户名和密码 souche@kickseed:~/.ssh$ cat config # 这是跳板机的配置,给跳板机的 IP 起个别 ...
- webpack4.41.0配置三(插件minCssExtract/ DefinePlugin/Html)
(注:如无特殊说明这里的配置文件都指的是webpack.config.js) minCssExtract 我们通常期望js和js文件一起,css和css文件一起.该插件将CSS提取到单独的文件中.它为 ...
- unittest的discover方法
转载:https://www.cnblogs.com/imyalost/p/9048386.html discover()方法 discover(start_dir, pattern ='test * ...
- 每天进步一点点------Allegro 怎样把铺铜显示关掉,但是走线要显示?
[背景] 铺铜是PCB布线的末尾环节,在PCB设计后期审查中,我们会检查走线的规则,但是铺铜后,不容易看见走线的效果,这时我们需要关闭铺铜显示,但是走线任然要显示. [解决方法] 执行Setup-&g ...
- 【正确使用vim编辑器的姿势】
"vi:可视化接口(Visual Interface) vim:是vi的增强版(vi iMprove) vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中 ...
- jsp页面直接读取mysql数据库数据显示
jsp页面直接读取mysql数据库数据显示: <%@page import="java.sql.ResultSet"%> <%@page import=" ...
- 搭建 Kubernetes 高可用集群
使用 3 台阿里云服务器(k8s-master0, k8s-master1, k8s-master2)作为 master 节点搭建高可用集群,负载均衡用的是阿里云 SLB ,需要注意的是由于阿里云负载 ...
- VS2017编译错误:#error: Building MFC application with /MD[d] (CRT dll version) requires MFC shared dll version
VS2017编译错误:#error: Building MFC application with /MD[d] (CRT dll version) requires MFC shared dll ve ...