v-on 补充 传递自定义参数,事件修饰符

165 阅读1分钟

事件绑定的方法写成 函数调用 的形式,可以传入自定义参数

定义方法时需要定义 形参 来接受传入实参

事件的后面跟上 .修饰符 可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有多种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on补充</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点击" @click="doTt('真的喜欢',666)" />
			<input type="text" @keyup.enter="sayHi" />
		</div>
		<!-- 开发环境版本,包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					doTt:function(p1,p2){
						console.log("我爱做IT!!!");
						console.log(p1);
						console.log(p2);
					},
					sayHi:function(){
						alert("你好呀!");
					}
				}
			})
		</script>
	</body>
</html>