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中我们可以 ...
随机推荐
- TimeSpan的用法
TimeSpan的属性和方法: 下面的列表涵盖了其中的一部分: 属性: Add:与另一个TimeSpan值相加. Days: 返回用天数计算的TimeSpan值.Hours: 返回用小时计算的Time ...
- 2019 DevOps 技术指南
原文链接:https://hackernoon.com/the-2018-devops-roadmap-31588d8670cb 原文作者:javinpaul 翻译君:CODING 戴维奥普斯 写在前 ...
- k8s ingress 转发服务，内容显示不全问题
0x00 事件 部署了 ingress ,并声明了两个路由 /eureka 和 /tomcat,/eureka 转发到了 eureka server 的服务端口,/tomcat 转发到了 tomcat ...
- 数据库事务系列－MySQL跨行事务模型
说来和MySQL倒是有缘,毕业的第一份工作就被分配到了RDS团队,主要负责把MySQL弄到云上做成数据库服务.虽说整天和MySQL打交道,但说实话那段时间并没有很深入的理解MySQL内核,做的事情基本 ...
- 池化技术（一）Druid是如何管理数据库连接的？
基于依赖程序的版本信息:druid:1.1.16 驱动程序mysql-connector-java:8.0.17 下一篇:HikariCP是如何管理数据库连接的 零.类图& ...
- go 语言 搭建 图片上传 服务器
工具: LiteIDE 配置: 代码:list.html <!doctype html> <html> <head> <meta charset=" ...
- Linux查看CPU和内存情况
本文简单介绍在Linux上查看CPU和内存情况和一款系统资源查看工具htop. 查看CPU情况 以下是个人工作会经常使用到的服务器的信息. 查看所有CPU信息 可以通过如下命令查看所有CPU信息: # ...
- SpringBoot 整合Shiro实现动态权限加载更新+Session共享+单点登录
作者:Sans_ juejin.im/post/5d087d605188256de9779e64 一.说明 Shiro是一个安全框架,项目中主要用它做认证,授权,加密,以及用户的会话管理,虽然Shir ...
- 【nodejs原理&源码赏析（6）】深度剖析cluster模块源码与node.js多进程（下）
目录 一. 引言 二.server.listen方法 三.cluster._getServer( )方法 四.跨进程通讯工具方法Utils 五.act:queryServer消息 六.轮询调度Roun ...
- MarkDown富文本编辑器怎么加载模板文件
我们只需要一段加载代码就可以搞定MarkDown加载模板文件. $("#md-demo").bind('click', function () { $.get("/Lib ...