<!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. pandas--对axis=0,axis=1的理解

    Stackoverflow.com是程序员的好去处,本公众号将以pandas为主题,开始一个系列,争取做到每周一篇,翻译并帮助pandas学习者一起理解一些有代表性的案例.今天的主题就是Pandas与 ...

  2. Kattis - virus【字符串】

    Kattis - virus[字符串] 题意 有一个正常的DNA序列,然后被病毒破坏.病毒可以植入一段DNA序列,这段插入DNA序列是可以删除正常DNA序列中的一个连续片段的. 简单来说就是,给你一段 ...

  3. 滑块控件CCControlSlider

    #include "cocos-ext.h" //包含头文件 using namespace cocos2d::extension;//引用命名空间 /** * 创建CCContr ...

  4. NC审批流开发流程

            1.新建的是数据库表结构中一定要有                          [审批人.                            制单人.             ...

  5. spark程序设计

    Spark程序设计—创建RDD:从Scala集合构造成RDD parallelize(a, 3) makeRDD(a, 3) 他俩使用方式一样,只不过名字不一样 Spark程序设计—创建RDD:本地文 ...

  6. 通过Java编码获取String分行字符串的内容

    代码案列: import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.IOException ...

  7. oracle lpad 函数使用介绍

    函数介绍 lpad函数从左边对字符串使用指定的字符进行填充.从其字面意思也可以理解,l是left的简写,pad是填充的意思,所以lpad就是从左边填充的意思. 语法格式如下: lpad( string ...

  8. c++第三十二天

    p164~p170: 大致内容 迭代语句 1.while语句. 2.传统for. 3.范围for.两个注意点是:1- 通常使用auto来确保类型相容,2- 如果需要修改元素则需要使用&符(还可 ...

  9. [.net基础]访问修饰符

    标题:[.net基础]访问修饰符 一.前言 基础掌握不牢固啊,所以记录下来. 二.方法访问修饰符Internal (1).创建工程ParentAndSon (2).添加类ModelA namespac ...

  10. MVC 4中的前端渲染 @Helper指令

    如果我们需要在一个页面或多个页面显示如人民币格式(后台传回来的无￥)￥的格式化.或是对后台数据作如保留小数个数等处理,这些东西经常要用到,特别是一些NULL值的处理,有可能会出错.这时我们可以通过创建 ...