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-表单提交的更多相关文章

  1. vue之回车触发表单提交

    vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...

  2. 如何用elementui去实现图片上传和表单提交,用axios的post方法

    下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...

  3. 小程序 <web-view></web-view> 中使用 form 表单提交

    在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...

  4. vue表单控件绑定(表单数据的自动收集)

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

  5. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

  6. vue 表单校验(二)

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  7. 表单提交数据格式form data

    前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交 ...

  8. vue表单校验(三)

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

  9. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  10. from表单提交数据之后,后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

随机推荐

  1. js面向对象的程序设计 --- 下篇 继承启蒙

    继承是oo语言中一个最为人津津乐道的概念.ECMAScript支持实现继承,而且实现继承只要是靠原型链来实现的 ·原型链 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾一 ...

  2. 变色html css js

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. IntelliJ IDEA 2017.3百度-----树状结构

    ------------恢复内容开始------------ ------------恢复内容结束------------

  4. 题解【洛谷P1046】[NOIP2005普及组] 陶陶摘苹果

    [NOIP2005] 陶陶摘苹果 首先,我们用一个数组s[11]存储每个苹果的高度. 然后,用a表示陶陶的身高. 接着,用a+30与s[i]比较,大于则计数器加一. 最后,输出计数器的值即可. #in ...

  5. Integer.parseInt(s)、Integer.valueOf(s)与new Integer()的异同

    我们在开发过程中,很多时候需要将String类型数据转换成Integer,而比较常用的方式就是--nteger.parseInt(s).Integer.valueOf(s)与new Integer() ...

  6. CSP2019感想

    我觉得自己好弱啊. 想更新博客,可是又没有人看. 本来自己还不算太弱,可是自己越来越腐败. 看看自己,连更新博客的资本都没有了呢.别人写些什么都是经典干货.自己写什么自己都觉得垃圾,只好默默地删掉. ...

  7. 抽象类和final修饰符

    抽象类和抽象方法的特点: 1.都通过abstract关键字来修饰. 2.抽象类不能实例化. 3.抽象类中可以有 0~多个抽象方法.(可以没有抽象方法) 4.抽象方法只有方法声明,没有方法实现.(没有方 ...

  8. centos6.5下安装mysql数据库

    centos6.5下安装mysql数据库 1.安装mysql数据库:yum install mysql-server 2.临时启动数据库:service mysqld start 3.开机启动数据库: ...

  9. ASA映射80端口到公网

    1.测试拓扑: 2.测试目的:Web Server:192.168.1.100/24 GW:192.168.1.254Internet:200.1.1.2/24 映射的地址:200.1.1.3 3.配 ...

  10. 推荐一个手机端切换地址gps的app

    在写脚本的时候遇到的 客户提供了这个app 免费 自身可以防检测 苹果和安卓都可以使用   官网 http://www.daniu.net/   搜索 大牛 或者danniu即可