<!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. 剑指offer笔记面试题1----赋值运算符函数

    题目:如下为类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString{ public: CMyString(char* pData = nullptr); CMyS ...

  2. SSH框架之Spring+Struts2+Hibernate整合篇

    回顾 -Hibernate框架 ORM: 对象关系映射.把数据库表和JavaBean通过映射的配置文件映射起来, 操作JavaBean对象,通过映射的配置文件生成SQL语句,自动执行.操作数据库. 1 ...

  3. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  4. Linux学习入门-------------------------VMvare与镜像的安装与配置

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_39038465/article/d ...

  5. 通过程序调用微信公众号发消息api返回48001

    自己的订阅号,尝试通过写程序来给用户发消息.结果呢,接口返回报错:errcode=48001,errmsg = api unauthorized hint: [ZlPULa02942276!] 去微信 ...

  6. 坚果云+typora(个人十分喜欢的一个记笔记方式)

    1.名称 坚果云 markdown--->typora 2.喜欢原因 2.1 坚果云 坚果云全平台覆盖,支持Windows.Mac.Linux.iOS(iPad及iPhone).Android. ...

  7. 从简单Sql探索优化之道

    从简单Sql探索优化之道 梁敬彬 2016-03-17 09:39:41 本文需要优化的语句是select count(*) from t,这简单的统计语句一出,估计不少人纳闷了,能有啥优化空间,还优 ...

  8. Python语法速查： 15. 常用数据结构

    返回目录 本篇索引 (1)array (2)bisect (3)deque (4)defaultdict (5)namedtuple (6)heapq (7)itertools (1)array ar ...

  9. LeetCode刷题--整数反转（简单）

    题目描述 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 12 ...

  10. (绿色)修正版gooflow流程解决方案(源码分享+在线演示+UI地址下载)

    gooflow出现挖矿机木马,请勿随意去其他网站下载!!! 一.功能简介 gooflow功能清单1.自定义流程绘制2.自定义属性添加3.支持3种步骤类型普通审批步骤自动决策步骤手动决策步骤 4.决策方 ...