提交表单不刷新页面

<!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. Gym - 100221D 一题一直没过的dfs，，应该是纯手动码？

    不写了,10年以后再回来写. http://codeforces.com/gym/100221/attachments H题

  2. Asp.NetCore WebApi 引入Swagger

    一.创建一个Asp.NetCore WebApi 项目 二.引入NuGet包 SwashBuckle.AspNetCore 三.在项目属性配置中设置 四.修改项目的启动文件Startup.cs 1). ...

  3. 利用Java程序将字符串进行排序与拼接

    1.初始生成字符串的代码程序: package com.map.test; import java.util.ArrayList; import java.util.Collections; impo ...

  4. 关于Mdi窗口-父窗口上的控件把子窗口的挡住的问题

    using System.Runtime.InteropServices; [DllImport("user32")] public static extern int SetPa ...

  5. 域名带与不带www的区别

    首先我们来说下为什么会产生带www与不带www的两种域名. 不带www的域名为顶级域名或一级域名,如qiankoo.com.带www的为二级域名,如www.qiankoo.com. 在购买域名时,域名 ...

  6. 基于python3.6的如何爬取百度地图

    先前参考了其他的代码,大多数是python2.7写的,而3.6用的类库以及规则有了很大的变动,所以自己写了一个这样的代码,供给大家参考. def get_station(i): station=[] ...

  7. Mysql update后insert造成死锁原因分析及解决

    系统中出现死锁的日志如下: ) TRANSACTION: , ACTIVE sec inserting mysql tables , locked LOCK WAIT lock struct(s), ...

  8. codevs 4052 黎恒健大战YJY

     时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题目描述 Description 现在,黎恒健与YJY由于身处异地,非常迫切地想在最短的时间内相遇,然后干一架.但 ...

  9. Metasploitable渗透测试实战——Windows漏洞 MS08-067复现

    Ms08-067 攻防环境: 攻击机:kali     ip:198.168.12.212 靶机:Window XP 未打过ms08-067补丁  ip:198.168.12.209

  10. idea字体模糊

    用jdk1.8的jre替换idea的jre64,但是记得在lib里加上jdk的lib中的tools.jar. 如图: 然后 将原来jre64的TOOLS.jar拷贝到替换后的jre的lib目录下,重启 ...