26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单
提交表单不刷新页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<!--方法一:原生-->
<form action="" @submit="post1('hdphp',$event)">
<h1>{{times}}</h1>
<button>提交</button>
</form>
<!--方法二:修复符操作-->
<form action="" @submit.prevent="post2('hdphp')">
<h1>{{times}}</h1>
<button>提交</button>
</form>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
times: new Date()
},
methods: {
// 方法一:修复符操作
post1(num,event){
event.preventDefault();//默认不刷新页面提交
alert(num);
},
// 方法二:修复符操作
post2(num){
alert(num);
}
}
});
</script>
</body>
</html>
效果:
26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单的更多相关文章
- 11.VUE学习之提交表单时拿到input里的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 提交form表单不刷新页面案列
提交form表单不刷新页面其实很简单的,这里拿上传图片来举列,大家有什么其它的方法也欢迎留言告知与我 <form action="" method="post&qu ...
- 用HTTP状态码实现提交表单后刷新页面不重复提交
正常情况下,表单提交后如果用户刷新页面会重复提交表单,有些情况下我们不希望表单重复提交,利用HTTP协议中的307状态码重定向页面可以实现这个目的.实例如下: 表单页面代码: <form act ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 时间修饰符之使用$event和prevent修饰符操作表单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Web jsp开发学习——Servlet提交表单时用法
实现提交表单以后判断输入的信息是否符合条件 若符合条件 先新建servlet Sevlet的两种声明方式,二选一即可 再到web.xml里注册 register.jsp就是表单的界 ...
- 使用iframe实现提交表单不刷新页面
正常情况下,当你向服务器发送数据的时候,你的浏览器将会打开action页面,并且不会重回到当前页面.但是有的时候,我们因为各种各样的要求,而不希望浏览器在提交数据的时候去刷新当前的页面或者转向到新的页 ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- POI 读取Excel数据
private List<LeagueGroup> read() throws IOException{ List<LeagueGroup> leagueGroups=new ...
- 关于js框架 dwz 与 yii的的分页 以及筛选的结合
此为jicheng1014 原创....地址为http://jicheng1014.cnblogs.com dwz是一个不错的前端框架 但是 注意 所有的后端 都是要自己写的 常见的应用是 ...
- com.google.gson.stream.MalformedJsonException的解决办法
关于Gson解析的异常,如果你程序出现以下的异常,有两种可能性:‘ 1. 找到一个JSON格式的验证工具,这个网上很多大家可以百度下: 2.你的JSON格式验证没有问题,却一直报这个解析错误,请确定你 ...
- UVALive 4261——Trip Planning——————【dp+打印路径】
Trip Planning Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Stat ...
- java反射-使用反射获取类的所有信息
在OOP(面向对象)语言中,最重要的一个概念就是:万事万物皆对象. 在java中,类也是一个对象,是java.lang.Class的实例对象,官网称该对象为类的类类型. Class 类的实例表示正在运 ...
- VMware 虚拟机安装及部署
Linux系统安装及网络配置 这篇文章介绍关于Linux系统的安装以及网络配置,关于虚拟机配置中网络的几个模式区别进行详细讲解.学习Linux对于后端开发人员来说是很有必要的,结合实际开发,Linux ...
- 解决Django Rest Framework中的跨域问题
方案一: 全局配置 自定义中间件 # my_md.py class MiddlewareMixin(object): def __init__(self, get_response=None): se ...
- F5-WAF-12.0
平台: CentOS 类型: 虚拟机镜像 软件包: f5bigip basic software security waf 服务优惠价: 按服务商许可协议 云服务器费用:查看费用 立即部署 产品详情 ...
- 爬虫系统-日志、初始化url
1.日志log4j 1.1.DEBUG:debug级别 1.2.stdout:输出到控制台 1.3.D:输出到文件 log4j.rootLogger=DEBUG, stdout,D #Console ...
- 转： ZigBee/Z-Stack CC2530实现低功耗运行的配置简介
转: ZigBee/Z-Stack CC2530实现低功耗运行的配置简介http://bbs.elecfans.com/jishu_914377_1_1.html(出处: 中国电子技术论坛) 设备支持 ...