2.4 vue点击函数 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
	<style>
		.div{
			width: 200px;
			height: 200px;
			background: green;
			margin-top: 20px;
		}
		.p{
			width: 100px;
			height: 100px;
			background: grey;
		}
	</style>
</head>

<body>
	<div id="app">
		<input type="text" :value="age">
		<button v-on:click="add('kaivon',$event)">加一岁</button>
		<button @click="sub">减一岁</button>

		<div class="div" @click="divClick">
			<p class="p" @click.stop="pClick"></p>
		</div>

		<div class="div" @click="divClick">
			<a href="http://www.chenxuehui.com" @click.prevent.stop="aClick">个人博客</a>
		</div>
	</div>

	<script>
		new Vue({
			el:'#app',
			data:{
				age:18,
			},
			methods:{
				add(msg, ev){
					this.age++;

					console.log(ev);
					console.log(msg);
				},
				sub(){
					this.age--;
				},
				divClick(){
					console.log('div点击了');
				},
				pClick(){
					console.log('p点击了');
				},
				aClick(){
					console.log('a点击了');
				}
			}
		});
	</script>
</body>

</html>

　　

posted @ 2021-12-21 11:41  JavaShop  阅读(78)  评论(0)    收藏  举报