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 ...
随机推荐
- 【C#】=>符号的使用
Lambda表达式.Lambda表达式是C#3.0的新内容,如果您之前学习的C#2.0,不认识也就不奇怪了.给您举个例子.例如,我定义一个委托:delegate int Method(int a, i ...
- win8.1x64下完美运行IE6
IE6我相信是所有前端人员永远都绕不过去的坎,操作的版本越来越高,离xp越来越远,难道你还在win8下安装个虚拟机来运行IE6吗?这样即消耗系统资源,来回的切换也麻烦,关键是只为了一个测试哦,没必要这 ...
- ASP Session的功能的缺陷以及解决方案
转http://www.cnblogs.com/jhy55/p/3376925.html 目前ASP的开发人员都正在使用Session这一强大的功能,但是在他们使用的过程中却发现了ASP Sessio ...
- webapp一些样式记录
图片外面的div设置宽高自适应width: 100vw; max-width: 640px; display: block; height: 43.75vw; max-height: 280px; f ...
- mybatis-generator.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...
- COGS 201. [BYVoid S1] 埃雷萨拉斯的宝藏
★★ 输入文件:eldrethalas.in 输出文件:eldrethalas.out 简单对比时间限制:1 s 内存限制:256 MB 问题描述 一万两千年前,精灵还是在艾萨拉女王的 ...
- ARM实验1 —— 流水灯实验
实验内容: 编写GPIO模块程序,实现对FS_4412平台的上的led2,led3,led4 ,led5,的流水灯实现. 实验目的: 熟悉开发环境的使用. 掌握Exynos 4412处理器GPIO功能 ...
- Codeforces Round #323 (Div. 2) D 582B Once Again...（快速幂）
A[i][j]表示在循环节下标i开头j结尾的最长不减子序列,这个序列的长度为p,另外一个长度为q的序列对应的矩阵为B[i][j], 将两序列合并,新的序列对应矩阵C[i][j] = max(A[i][ ...
- swift 命名空间实现的设计思考：extension YKKit where Base == String
设计问题:谁来构造.构造什么.怎么添加新功能 关键词:本体.客体.构造.映射.功能. 别名:桥接变量.型变变量.容器变量.适配变量,构造变量: 目的:添加命名空间.添加新功能. 原则:不修改本体的实现 ...
- 理顺react，flux，redux这些概念的关系
作者:北溟小鱼hk链接:https://www.zhihu.com/question/47686258/answer/107209140来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...