提交表单不刷新页面

<!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. 面试大全之JVM篇

    JVM 内存模型以及分区,需要详细到每个区放什么. JVM 分为堆区和栈区,还有方法区,初始化的对象放在堆里面,引用放在栈里面,class类信息常量池(static常量和static变量)等放在方法区 ...

  2. 经典PHP笔试题

    1．考虑如下脚本.标记处应该添加什么代码才能让脚本输出字符串php? $alpha = 'abcdefghijklmnopqrstuvwxyz'; $letters = array(15, 7, 15 ...

  3. json解析数组类型的数据

    //微信里一个检测是否有发送模版消息的权限的方法//此处的openid代表的微信用户openid,templateId代表的是模版消息idpublic boolean checkIsSendTempM ...

  4. spring batch 读取多个文件数据导入数据库

    项目的目录结构 需要读取文件的的数据格式 applicatonContext.xml的配置 <?xml version="1.0" encoding="UTF-8& ...

  5. C# 连接 postgres失败

    小程序完成了,要发布到客户的服务器上: 我的测试机:win10  64             数据库:PG9.6.5     64 客户服务器:win7    32             数据库: ...

  6. C# 发Domino邮件 报错误 Password or other security violation for database 的解决方案

    错误提示: Password or other security violation for database ******* 问题产生的描述: 之前C#发邮件是好的 加上了附件部分代码之后,出现了这 ...

  7. .gitignore梳理

    参考来源: https://www.cnblogs.com/kevingrace/p/5690241.html 对于经常使用Git的朋友来说,.gitignore配置一定不会陌生.废话不说多了,接下来 ...

  8. EEC 欧姆龙PLC输入模块算法

        Option Explicit Public MyArray(20000) As Integer Public MyArraySensor(20000) As Integer Sub 生成输入 ...

  9. pat乙级1067

    1.用cin输入数据后,再用getline 输入,还是会输入cin已经输入的数据,即cin和getline互相独立. 2.题目中没有说尝试的密码不包含空格,因此不能用cin,而用getline. #i ...

  10. 【洛谷2257】YY的GCD（莫比乌斯反演）

    点此看题面 大致题意: 求\(\sum_{x=1}^N\sum_{y=1}^MIsPrime(gcd(x,y))\). 莫比乌斯反演 听说此题是莫比乌斯反演入门题? 一些定义 首先,我们可以定义\(f ...