vue(2)事件绑定

最新推荐文章于 2023-05-29 21:25:26 发布

taojYang

最新推荐文章于 2023-05-29 21:25:26 发布

阅读量115

点赞数

分类专栏： vue 文章标签： vue 时间绑定

本文链接：https://blog.csdn.net/weixin_43293451/article/details/92789845

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<style type="text/css">
		div{
			width: 200px;
			cursor:pointer;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="vue.min.js"></script>

	<div id="div1">
		<div>点击了{{clickNumber}}次</div>
		<button v-on:click="count">点击1</button><!--点击-->
		<button @click="count">点击2</button>
	</div>
	<script type="text/javascript">
		new Vue({
			el:"#div1",
			data:{
				clickNumber:0,
			},
			methods:{
				count:function(){
					this.clickNumber++;
				}
			}
		});
	</script>

	<div id="content">
		<!--冒泡.stop  .prevent  .capture  .self  .once-->
		<div id="grandFather" v-on:click="doc" style="background-color: red">
			grandFather
			<div id="father" v-on:click.once="doc" style="background-color: pink">
				father
				<div id="me" v-on:click="doc" style="background-color: yellow">
					me
					<div id="son" v-on:click="doc" style="background-color: green">
						son
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var content = new Vue({
			el:"#content",
			data:{
				id:'',
			},
			methods:{
				doc:function(){
					this.id = event.currentTarget.id;
					alert(this.id);
				}
			}
		});
	</script>

	<div id="div2">
		<a href="http://12306.com" @click="jump">正常的链接</a><br>
		<a href="http://12306.com" @click.prevent="jump">prevent jum()之后的链接</a><br>
		<a href="http://12306.com" @click.prevent>纯prevent之后的链接</a><br>
		<br><br>
		<form @submit="jump" action="http://12306.com">
			<button type="submit">正常的form</button>
		</form>
		<form @submit.prevent="jump" action="http://12306.com">
			<button type="submit">preventjump()之后的form</button>
		</form>
		<form @submit.prevent action="http://12306.com">
			<button type="submit">纯prevent知否的form</button>
		</form>
	</div>
	<script type="text/javascript">
		new Vue({
			el:"#div2",
			data:{

			},
			methods:{
				jump:function(){
					alert("jump()函数被调用");
				}
			}
		});
	</script>
</body>
</html>

在这里插入图片描述

taojYang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue(2)事件绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style type="text/css"> div{ width: 200px; cursor:pointer; } &...
复制链接

扫一扫

专栏目录