<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="vue.js"></script>

    <title id="title">{{title}}</title>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <!--<form action="">-->

    <!--<form action="" @submit="post('简单记录')">-->

    <!--<form action="" @submit="post_event('简单记录',$event)">-->

    <form action="" @submit.prevent="prevent_post('简单记录')">

        <h1>{{date}}</h1>

        <button>提交</button>

    </form>

</div>

<script>

    var vue = function (options){new Vue(options)};

    vue({

        el:'#title',

        data:{

            title:'Vue 时间修饰符之使用$event和prevent修饰符操作表单'

        }

    });

    var app = vue({

        el:'#ask',

        data:{

            date:new Date()

        },

        methods:{

            //会刷新页面

            post(data){

                alert(data)

            },

            //不会刷新页面

            post_event(data,event){

                event.preventDefault();//禁用浏览器默认事件

                alert(data)

            },

            //不会刷新页面

            prevent_post(data){

                alert(data)

            }

        }

    });

</script>

</body>

</html>

Vue 时间修饰符之使用$event和prevent修饰符操作表单的更多相关文章

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

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

  2. 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单

    提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter

    1.绑定监听@click: (以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click ...

  4. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

  5. vue 时间选择器组件

    vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...

  6. VUE过滤器的使用 vue 时间格式化

    过滤器介绍 官方教程地址:https://cn.vuejs.org/v2/guide/filters.html 过滤器常被用于一些文本格式化 我们可以自定义过滤器,可以实现各种各样的功能. vue时间 ...

  7. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  8. 将html中的br换行符转换为文本输入中的换行符(转)

    PHP中的有个非常好的函数:nl2br(),将文本框中的换行转换为HTML页面的<br />,但是如何实现将html中的<br />换行符转换为文本框中的换行符呢?下面这几个方 ...

  9. java中普通的顶级类是不能使用static关键字修饰的。只有内部类可以使用static修饰，也可以不使用staitc关键字修饰。

    java中普通的顶级类是不能使用static关键字修饰的.只有内部类可以使用static修饰,也可以不使用staitc关键字修饰. java中的类可以是static吗?答案是可以.在java中我们可以 ...

随机推荐

  1. 松软科技web教程:JavaScript Switch 语句

    switch 语句用于基于不同条件执行不同动作. JavaScript Switch 语句 请使用 switch 语句来选择多个需被执行的代码块之一. 语法 switch(表达式) { case n: ...

  2. 如何抓取 framework input 事件相关 log

    出现事件输入相关的问题时, 建议先 followhttp://429564140.iteye.com/blog/2355405来检测对应的设备是否有响应输入 如果没有响应输入,则可能是 driver ...

  3. 【Objective-C】Objective-C语言的动态性

    Objective-C语言的动态性主要体现在以下3个方面 (1)动态类型:运行时确定对象的类型. (2)动态绑定:运行时确定对象的方法. (3)动态加载:运行时加载需要的资源或者或代码模块. 一.动态 ...

  4. shell 脚本里的$(( ))、$( )、``与${ }的区别

    shell  脚本里的命令执行 1. 在bash中,$( )与` `(反引号)都是用来作命令替换的. 命令替换与变量替换差不多,都是用来重组命令行的,先完成引号里的命令行,然后将其结果替换出来,再重组 ...

  5. 给定数轴上的n个点，求距离最近的两个点的距离

    public class MinimumSpacing { //给定平面上的n个点,求距离最近的两个点的距离. //无从下手的话,先分解问题,分解成简单的,逐个分析,然后再合在一起考虑 //这是个2维 ...

  6. Jenkins学习安装配置和使用

    为了能够频繁地将软件的最新版本,及时.持续地交付给测试团队及质量控制团队,以供评审,所以引入持续集成工具Jenkins,从而实现公司新产品持续集成,自动化部署. 环境准备 ●操作系统:Windows1 ...

  7. Vue父子组件数据双向绑定，子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

  8. 【第二章】Zabbix3.4监控SQLServer数据库和H3C交换机思科Cisco防火墙交换机教程笔记

    监控SQLServer数据库 SSMS执行相关SQL SQL模板命名规则 Zabbix客户端导入模板 添加SQLServer监控图形 SQLServer服务器关联模板 监控思科Cisco防火墙交换机 ...

  9. C 语言输出不同颜色字体

    C 语言输出不同颜色字体 \033是8进制,它就是unix下终端转义符ESC(16进制1A,10进制27) ESC[xm 是unix下改变终端输出颜色的命令 所以,如果是红色,则我们定义为\033[0 ...

  10. Windows下第一个驱动程序

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 参考下面博客: VS2017搭建驱动开发环境WDK :https: ...