<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件修饰符之使用$event与$prevent修饰符操作表单</title>

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

</head>

<body>

<div id="hdcms">

    <!--<form action="" @submit="post($event)">-->

    <!--prevent 写入到代码里面等同于写入js中。阻止提交事件发生-->

    <form action="" @submit.prevent="post('lantian')">

        <h1>{{times}}</h1>

        <button>提交</button>

    </form>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            times: new Date()

        },

        methods: {

//            post($event) {

//                //preventDefault() 阻止元素发生默认的行为

//                event.preventDefault();

//                alert('lantian');

//            },

            post(num) {

                alert(num);

            }

        }

    });

</script>

</body>

</html>

　　

026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单的更多相关文章

  1. 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. 027——VUE中事件修饰符：stop prevent self capture

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

  4. VUE中事件修饰符：stop prevent self capture

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

  5. 025——VUE中事件的基本使用与VUE中差异

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

  6. vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

    ==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...

  7. 028——VUE中事件修饰符once

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

  8. vue中事件代理

    由于在vue实例内部,this指向了实例本身,所以在编写事件代理的时候,用e.currentTarget引用绑定事件代理的元素,e.target引用事件目标元素.刚刚不注意想用this引用代理元素报错 ...

  9. vue中事件冒泡规则和事件捕获规则

    <div id="app"> <div @click="handleClickOne"> <p @click="hand ...

随机推荐

  1. 145. Binary Tree Postorder Traversal（二叉树后序遍历）

    Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...

  2. POJ - 3648 Wedding (2-SAT 输出解决方案)

    题意:有N-1对夫妇和1对新郎新娘要出席婚礼,这N对人要坐在走廊两侧.要求每对夫妇要坐在不同侧.有M对人有通奸关系,对于这一对人,不能同时坐在新娘对面(新娘新郎也可能和别人有通奸关系).求如何避免冲突 ...

  3. 两句话，实现android 4.4以上实现沉浸式状态栏

    效果图如下,就是状态栏和actionbar保持一致的颜色,非常漂亮 1:在Activity的OnCreate函数 if (Build.VERSION.SDK_INT >= Build.VERSI ...

  4. webmagic的设计机制及原理-如何开发一个Java爬虫 转

    此文章是webmagic 0.1.0版的设计手册,后续版本的入门及用户手册请看这里:https://github.com/code4craft/webmagic/blob/master/user-ma ...

  5. genisoimage命令用法

    功能说明:建立ISO 9660映像文件.  常用命令:genisoimage -o imagename.iso file 语 法:mkisofs [-adDfhJlLNrRTvz][-print-si ...

  6. 使用sql语句创建 表空间 和用户，以及如何彻底删除表空间和用户，使用命令导出和导出数据库

    创建表空间有很多种方式,在安装好oracle 11g 后在网站上 https://localhost:1158/em 手动创建也可以,但是没有sql直接生成方便,下面介绍下如何用sql语句直接生成表空 ...

  7. C++中去掉string字符串中的\r\n等

    string imagedata;imagedata = “dudau\r\ndadafca\r\n” CString Image; Image = imagedata.c_str(); Image. ...

  8. CF1137F Matches Are Not a Child's Play(LCT思维题)

    题目 CF1137F 很有意思的题目 做法 直接考虑带修改的做法,上一次最大值为u,这次修改v,则最大值为v了 我们发现:\(u-v\)这条链会留到最后,序列里的其他元素相对位置不变,这条链会\(u\ ...

  9. Apache 部署HTTPS

    Apache 部署HTTPS 系统:Linux Centos 7.4 x64 应用:Apache 2.4.6 需要安装:mod_ssl 注:确认开启 Include conf/extra/httpd- ...

  10. [HAOI2017模拟]囚人的旋律

    没有传送门辣. 神奇的DP题. 首先看到这道题第一眼应该想到正解不是在图上搞,肯定要把原图转化成序列. 根据逆序对的性质.每个点和标号大于他的点连边的点,其权值必定要小于该点,而没和他连边的且标号大于 ...