提交表单不刷新页面

<!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修复符操作表单的更多相关文章

  1. 11.VUE学习之提交表单时拿到input里的值

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

  2. 提交form表单不刷新页面案列

    提交form表单不刷新页面其实很简单的,这里拿上传图片来举列,大家有什么其它的方法也欢迎留言告知与我 <form action="" method="post&qu ...

  3. 用HTTP状态码实现提交表单后刷新页面不重复提交

    正常情况下,表单提交后如果用户刷新页面会重复提交表单,有些情况下我们不希望表单重复提交,利用HTTP协议中的307状态码重定向页面可以实现这个目的.实例如下: 表单页面代码: <form act ...

  4. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue 时间修饰符之使用$event和prevent修饰符操作表单

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  7. Web jsp开发学习——Servlet提交表单时用法

     实现提交表单以后判断输入的信息是否符合条件    若符合条件   先新建servlet  Sevlet的两种声明方式,二选一即可  再到web.xml里注册   register.jsp就是表单的界 ...

  8. 使用iframe实现提交表单不刷新页面

    正常情况下,当你向服务器发送数据的时候,你的浏览器将会打开action页面,并且不会重回到当前页面.但是有的时候,我们因为各种各样的要求,而不希望浏览器在提交数据的时候去刷新当前的页面或者转向到新的页 ...

  9. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. deep copy and shallow copy

    链接A:浅拷贝就是成员数据之间的一一赋值:把值赋给一一赋给要拷贝的值.但是可能会有这样的情况:对象还包含资源,这里的资源可以值堆资源,或者一个文件..当值拷贝的时候,两个对象就有用共同的资源,同时对资 ...

  2. (转)linux 中特殊符号用法详解

    linux 中特殊符号用法详解 原文:https://www.cnblogs.com/lidabo/p/4323979.html # 井号 (comments)#管理员  $普通用户 脚本中 #!/b ...

  3. 使用：/usr/bin/phpize 报错

    使用:/usr/bin/phpize 出现下面错误提示 Can't find PHP headers in /usr/include/php The php-devel package is requ ...

  4. 性能测试学习第十天_controller

    集合点设置 controller虚拟多个用户执行脚本启动步骤不一定同步,集合点在脚本的某处设置一个标记,当有虚拟用户运行到这个标记的时候,停下等待所有用户都达到这个标记,再一同进行下面的步骤.这样可以 ...

  5. Invoke PowerShell by UiPath

    UiPath能够调用PowerShell ,最近在项目中得到了实践:  需求: 某系统生成的日志文件的名字,时间戳只到分,形如bz20180214_1655.log    这样在如果在1分钟内生成多个 ...

  6. ElasticSearch java API-使用More like this实现基于内容的推荐

    ElasticSearch java API-使用More like this实现基于内容的推荐 基于内容的推荐通常是给定一篇文档信息,然后给用户推荐与该文档相识的文档.Lucene的api中有实现查 ...

  7. IntelliJ IDEA IDEA 2018 激活注册码

    K03CHKJCFT-eyJsaWNlbnNlSWQiOiJLMDNDSEtKQ0ZUIiwibGljZW5zZWVOYW1lIjoibnNzIDEwMDEiLCJhc3NpZ25lZU5hbWUiO ...

  8. uvm_svcmd_dpi——DPI在UVM中的实现（二）

    UVM中有需要从cmmand line 输入参数的需求,所有uvm_svcmd_dpi.svh和uvm_svcmd_dpi.cc 文件就是实现功能. uvm_svcmd_dpi.svh的源代码如下,我 ...

  9. [Asp.Net] MVC 和Web API Action 获取参数的区别

    Asp.net MVC 和web api 的action 在获取从前台传入的数据是有很大不同 前台使用ajax的方式向后台发起post的请求 Content-Type:application/json ...

  10. 【BZOJ3925】[ZJOI2015] 地震后的幻想乡（状压期望DP）

    点此看题面 大致题意: 有\(n\)个点和\(m\)条边,每条边的权值是一个\(0\sim1\)的随机实数,要你用\(n-1\)条边将图联通,问这\(n-1\)条边中边权最大值的期望最小值. 提示 这 ...