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中我们可以 ...
随机推荐
- 升鲜宝V2.0_杭州生鲜配送行业，升鲜宝供应链B端订货系统使用说明_升鲜宝生鲜供应链管理系统_15382353715_余东升
升鲜宝V2.0_杭州生鲜配送行业,升鲜宝供应链B端订货系统使用说明_升鲜宝生鲜供应链管理系统_15382353715 升鲜宝生鲜配送供应链系统经过这些年的发展,形成一套独特的订 ...
- 20190608_浅谈go&java差异(三)
20190608_浅谈go&java差异(三) 转载请注明出处https://www.cnblogs.com/funnyzpc/p/10990703.html 第三节内容概览 多线程通讯(线程 ...
- 「漏洞预警」Apache Flink 任意 Jar 包上传导致远程代码执行漏洞复现
漏洞描述 Apache Flink是一个用于分布式流和批处理数据的开放源码平台.Flink的核心是一个流数据流引擎,它为数据流上的分布式计算提供数据分发.通信和容错功能.Flink在流引擎之上构建批处 ...
- mybatis中查询结果为空时不同返回类型对应返回值
今天在别人的代码基础上实现新需求,看到对于mybatis查询结果的判断不是很正确,如果查询结果为空就会异常,不知道大家有没有这样的疑惑:mybatis中resultType有多种返回类型,对于每种不同 ...
- 表单生成器(Form Builder)之mongodb表单数据——整理数据
在上篇笔记中,为车辆信息表.车辆耗损表以及车辆营收表插入了一些数据.之后便是查询了,重点也在查询……按照之前定好的数据结构,如果查询mongodb document的最外层比较简单,但是我们的重点应该 ...
- Python语法速查： 12. 文件与输入输出
返回目录 (1)文件基本操作 ● 文件常用操作 内置函数或方法 描述 open(name [,mode [,buffering]]) 内置函数.用来打开文件,返回一个文件对象(file对象).详见下述 ...
- 017.Kubernetes二进制部署检查集群
一 验证集群功能 1.1 检查节点状态 [root@k8smaster01 ~]# kubectl get nodes 1.2 创建测试文件 [root@k8smaster01 ~]# cd /opt ...
- November 24th, Week 48th, Sunday, 2019
Once you replace negative thoughts with positive ones, you will start having positive results. 淘汰消极思 ...
- windows10 安装win10和ubuntu 16.04双系统
安装教程如下 亲测可用 https://www.cnblogs.com/masbay/p/10844857.html 镜像路径如下 http://releases.ubuntu.com/16.04/ ...
- LeetCode 652: 寻找重复的子树 Find Duplicate Subtrees
LeetCode 652: 寻找重复的子树 Find Duplicate Subtrees 题目: 给定一棵二叉树,返回所有重复的子树.对于同一类的重复子树,你只需要返回其中任意一棵的根结点即可. 两 ...