<!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. 在服务器的tomcat中部署手机apk项目，浏览器或手机下载不能根据URL下载和安装apk文件

    Android的APK包不能下载或安装,需在tomcat的web.xml加入 <mime-mapping>        <extension>apk</extensio ...

  2. Windows系统Git配置教程（Git配置git config）

    Windows系统Git配置教程(Git配置git config)   在很多Git配置教程中,多是安装完毕后就告诉大家要配置用户名和邮箱,但是这个配置是保存在哪里呢,配置后面的参数有什么不同呢,下面 ...

  3. SSM(SpringMVC+Spring+MyBatis)三大框架使用Maven快速搭建整合（实现数据库数据到页面进行展示）

    本文介绍使用SpringMVC+Spring+MyBatis三大框架使用Maven快速搭建一个demo,实现数据从数据库中查询返回到页面进行展示的过程. 技术选型:SpringMVC+Spring+M ...

  4. RAC环境下修改字符集

    跟单实例多少有点区别ORACLE 11g RAC 两节点第一步 查看字符集PRIMARY-SYS@mydb2>select userenv('language') from dual; USER ...

  5. 28.分类算法---KNN

    1.工作原理: 存在一个样本数据集合,也称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属分类对应的关系.输入没有标签的数据后,将新数据中的每个特征与样本集中数据对应的特 ...

  6. dp习题

    仅收录有意思的题目 数的划分 导弹拦截 : LIS的两种优化 教主的花园:将不同的情况分类,最后取max 午餐 & 挂饰: 需要排序 挂饰:0-1背包处理负数体积 投资的最大效益 : 完全背包 ...

  7. DynamicList

    DynamicList设计要点——类模板 申请连续空间作为顺序存储空间 动态设置顺序存储空间的大小 保证重置顺序存储空间时的异常安全性 DynamicList设计要点——函数异常安全的概念 不泄露任何 ...

  8. JavaScript-----9.函数

    1.函数的使用 1.1 声明函数和调用函数 //1.声明函数 //function 函数名() { // //函数体 //} function sayHi() { console.log('hi~') ...

  9. 数组累计-reduce

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. array.reduce(f ...

  10. C++入门到理解之文件操作(文本文件的读写+二进制文件的读写)

    原文地址http://www.javayihao.top/detail/168 一:概述 1.程序在运行中产生的数据都是临时数据,程序一旦运行结束会被释放,可以通过文件相关的操作将数据持久保存. 2. ...