提交表单不刷新页面

<!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. iOS书摘之Objective-C编程之道 iOS设计模式解析

    来自<Objective-C编程之道iOS设计模式解析>一书的摘要总结 一.Prototype 原型模式 定义:使用原型实例指定创建对象的种类,并通过复制这个原型创建新的对象.(<设 ...

  2. 去除pycharm的波浪线

    PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑.这里给大家分 ...

  3. 【干货】JavaScript DOM编程艺术学习笔记10-12【完】

    十.用JavaScript实现动画效果 鼠标放到链接上,每次只显示图片的一小部分,加快加载速度. js: function prepareSlideshow(){ //对象检测 if(!documen ...

  4. ubuntu 16.04安装nVidia显卡驱动和cuda/cudnn踩坑过程

    安装深度学习框架需要使用cuda/cudnn(GPU)来加速计算,而安装cuda/cudnn,首先需要安装nvidia的显卡驱动. 我在安装的整个过程中碰到了驱动冲突,循环登录两个问题,以至于最后不得 ...

  5. scanner/portscan/syn

    msf > use auxiliary/scanner/portscan/syn msf auxiliary(syn) > set RHOSTS 172.16.21.170  /*设定rh ...

  6. 更改placeholder样式

    /*不要将选择器进行组合*/ /* IE 10-11 */ :-ms-input-placeholder { color: #aaa; } /* webkit */ ::-webkit-input-p ...

  7. 自己实现的简单的grid

    12年在第一家公司的时候,有过很长一段时间在前端的使用研究上.一开始的时候使用ExtJs4.0 MVC 来开发前端,觉得里面的风转的组件非常好用,Panel.window.tree等等,简化了对于前端 ...

  8. SqlServer作业指定目标服务器

    用SSMS生成数据库作业的创建脚本的时候,有一步是sp_add_jobserver操作: EXEC @ReturnCode = msdb.dbo.sp_add_jobserver @job_id = ...

  9. k8s之configmap配置中心

    记录在石墨笔记中,懒得再粘贴了,大家直接移步下面地址 https://shimo.im/docs/ktNM72QPweEEkcWg/

  10. 在MVC中加载view(点开链接)的方式

    主要有: Html.ActionLink Html.RenderPartial Html.RenderAction Html.Partial AJAX.ActionLink load 浏览器对象模型 ...