Vue学习笔记——v-on

最新推荐文章于 2022-09-05 20:52:40 发布

渣渣圆

最新推荐文章于 2022-09-05 20:52:40 发布

阅读量147

点赞数

分类专栏： Vue 文章标签： vue js html

本文链接：https://blog.csdn.net/weixin_44154577/article/details/114381226

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

v-on

任何一名语言都离不开与用户交互，v-on就是vue用来监听事件

作用：绑定事件监听器
简写：@
预期：Function | Inline Statement | Object
参数：event

demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<!--v-on为元素绑定事件
	     方法内部通过this关键字来访问定义在data中的数据-->
	<div id="app"> 
	<input type="button" value="v-on指令" v-on:click="doIt()" />
	<input type="button" value="@简写" @click="doIt()" />
	<input type="button" value="双击事件" @dblclick="doIt()" /> 
	<h2 @click="changeFood">{{food}}</h2>
	</div>
	<body>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					food:"芹菜炒牛肉"
				},
				methods:{
					doIt:function(){
						alert("做It");
					},
					changeFood:function(){
						this.food+="好好吃!"
					}
				}
			})
		</script>
	</body>
</html>