v-on绑定事件例子

最新推荐文章于 2024-04-21 18:51:25 发布

喝星茶发o_o ....

最新推荐文章于 2024-04-21 18:51:25 发布

阅读量71

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44479957/article/details/125184574

版权

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

本文详细讲解了Vue.js中v-on指令的使用，通过实例展示如何绑定和处理各种JavaScript事件，包括点击、键盘输入等。同时，探讨了事件修饰符的运用，以实现更精细的事件控制。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click='fn'>点击</button>
			<!-- 用v-on:给事件绑定方法 -->
			<!-- 此例中给点击事件绑定方法fn -->
			<!-- 注:v-on: 可以简写成@ -->
			<button @click='fn'>点击</button>
			<!-- 给方法传参 -->
			<button @click='fun(100)'>fun</button>
			<!-- 数据可以直接当成参数使用 -->
			<button @click='fun(a)'>fun</button>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el:'#app',
				data(){
					return{
						a:10
					}
				},
				methods:{
					// vue实例所需要的方法，定在在methods属性对象中
					// 当按钮被点击时，执行fn方法
					fn(){
						alert(123)
					    // 在方法中使用实例的数据，需要加this
						alert(this.a)
					},
					// 定义带有参数的方法 
					fun(num){
						alert(num)
					}
				}
			})
			
		</script>
	</body>
</html>