7.Vue事件绑定指令参数

最新推荐文章于 2024-07-26 07:30:00 发布

西瓜咬人啦

最新推荐文章于 2024-07-26 07:30:00 发布

阅读量251

点赞数 1

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

@TMQ

本文链接：https://blog.csdn.net/weixin_42076050/article/details/109183504

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 方法调用时实际传入的参数

接受的实际参数有很多种，在下面代码中给了示例

2. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定指令参数</title>
	<script src="./js/vue.js"></script>
</head>
<body>
	 <div id="app">
	   <!--
	       js 实参与形参
		   形参:指的是方法定义是描述所接收的参数名称
		   实参:方法调用时实际传入的参数
	    -->
		
		<input type="button" value="事件参数绑定1" @click="print('123')"/>
		<input type="button" value="事件参数绑定2" @click="print(msg)"/>
		<input type="button" value="事件参数绑定3" @click="print(Math.pow(2,3))"/>
		<!--实参传this恒定只想window对象-->
		<input type="button" value="事件参数绑定4" @click="print(this)"/>
		<!--获取事件源-->
		<input type="button" value="事件参数绑定5" @click="print($event)"/>
		<!--获取事件源的目标元素-->
		<input type="button" value="事件参数绑定6" @click="print($event.target)"/>
		<!--获取事件源的目标元素的属性-->
		<input type="button" value="事件参数绑定6" @click="print($event.target.value)"/>
	</div>
</body>
 <script>
	 new Vue({
			  el:"#app",
			  data:{
				 msg:"旧参数"
			  },
			  methods:{
				print:function(arg){
				    console.log(arg); 
				}
			  
			  }
		   });
 </script>
</html>