Vue 时间修饰符之使用$event和prevent修饰符操作表单
<!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修饰符操作表单的更多相关文章
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单
提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @click ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- vue 时间选择器组件
vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...
- VUE过滤器的使用 vue 时间格式化
过滤器介绍 官方教程地址:https://cn.vuejs.org/v2/guide/filters.html 过滤器常被用于一些文本格式化 我们可以自定义过滤器,可以实现各种各样的功能. vue时间 ...
- vue 时间过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...
- 将html中的br换行符转换为文本输入中的换行符(转)
PHP中的有个非常好的函数:nl2br(),将文本框中的换行转换为HTML页面的<br />,但是如何实现将html中的<br />换行符转换为文本框中的换行符呢?下面这几个方 ...
- java中普通的顶级类是不能使用static关键字修饰的。只有内部类可以使用static修饰，也可以不使用staitc关键字修饰。
java中普通的顶级类是不能使用static关键字修饰的.只有内部类可以使用static修饰,也可以不使用staitc关键字修饰. java中的类可以是static吗?答案是可以.在java中我们可以 ...
随机推荐
- Ubuntu Server 上使用Docker Compose 部署Nexus(图文教程)
场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
- CVE-2019-0708漏洞复现
前言: 该漏洞前段时间已经热闹了好一阵子了,HW期间更是使用此漏洞来进行钓鱼等一系列活动,可为大家也是对此漏洞的关心程度,接下里就简单的演示下利用此漏洞进行DOS攻击.当然还有RCE的操作,这只演示下 ...
- JS 参考手册
JS 参考手册 JavaScript 对象 HTML DOM 对象
- Android微信九宫格图片展示控件
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/214 Android微信九宫格图片展示控件 半年前,公司产 ...
- GTID复制的工作原理
参考自:https://dev.mysql.com/doc/refman/5.7/en/replication-gtids-lifecycle.html 笔记说明: 本文翻译自官网,当然会根据语义做一 ...
- Angular框架入门
今天简单学习了AngularJS框架,在这里我想简单的总结一下我所了解的AngularJS和一些入门案例! 首先,我们要知道什么是AngularJS? AngularJS 诞生于2009年,由Mis ...
- Cisdem OCRWizard for Mac 使用教程
Cisdem OCRWizard for Mac是一款macOS平台的的文件识别软件,可以对任何PDF.扫描文件或图像文件(包括名片的照片)进行OCR识别,支持超过40种语言,帮助我们提高效率.现在小 ...
- js中自执行函数(function(){})()和(function(){}())区别
方式一,调用函数,得到返回值.强制函数直接量执行再返回一个引用,引用在去调用执行方式二,调用函数,得到返回值.强制运算符使函数调用执行(function(){})(); 是 把函数当作表达式解析,然后 ...
- acwing 850. Dijkstra求最短路 II 模板
地址 https://www.acwing.com/problem/content/description/852/ 给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为非负值. 请你求 ...
- RTX5的汽车级，工业级，医疗和铁路安全认证已经通过，证书已颁发
说明: 1.当前RTX5的教程已经在制作中,使用CMSIS-RTOS V2封装层,含FreeRTOS,配套V7,V6和V5板子. 2.我们各种开发板和模块的资料汇总贴,搞了个cnblogs,临时先用 ...