<!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. akka消息传递

    消息传递 消息本身要求是什么?是否必须可以序列化?消息传递根据传递的要求严格程序依次分为三类,1.至多一次到达 至消息最多一次传递到目的端,消息可能会丢失,但不会重复2.至少一次到达 潜在可能存在多次 ...

  2. Hive的metastore

    hive --service metastore 默认端口是9083 <property> <name>hive.metastore.uris</name> < ...

  3. Java堆内存设置

    转自:https://blog.csdn.net/Qiuzhongweiwei/article/details/81023645 堆内存设置 原理 JVM堆内存分为2块:永久空间和堆空间. 永久即持久 ...

  4. armv7 armv7s arm64 i386 x86_64

    开发SDK的同学需要了解这些指令集代表什么. armv7|armv7s|arm64都是ARM处理器的指令集 i386|x86_64 是Mac处理器的指令集 arm64:iPhone7 | iphone ...

  5. Ubuntu&Linux系统出现文件系统只读Read-only file system 的快速解决方法

    问题描述: 周末运行盘平台服务程序,周一来操作系统卡顿,主进程已退出,重启进程时提示Read-only file system:新建目录和其他chmod -R等等操作都提示Read-only file ...

  6. selenium 之定位方法

    1 id 定位 driver.find_element_by_id() HTML 规定id 属性在HTML 文档中必须是唯一的.这类似于公民的身份证号,具有很强的唯一性 from selenium i ...

  7. Java Calendar类总结

    在实际项目当中,我们经常会涉及到对时间的处理,例如登陆网站,我们会看到网站首页显示XXX,欢迎您!今天是XXXX年....某些网站会记录下用户登陆的时间,比如银行的一些网站,对于这些经常需要处理的问题 ...

  8. PHP联接MySQL

    <?php echo "This is a test</br>"; echo "asdfasdfadsf"; $mysql_server_na ...

  9. springmvc.xml配置图解

  10. DispatcherServlet讲解

    1.1.1.DispatcherServlet作用DispatcherServlet是前端控制器设计模式的实现,提供Spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring I ...