【学习笔记】15-v-on的传递参数时注意的问题

v-on需要传递参数时需要注意的问题

1.当没有参数传递时,方法名称后面可以不加小括号
2.当需要传递参数时,且只有一个参数需要传递,而没有进行传递,会默认输出浏览器的event对象
3.当需要传递多个参数时,想要获取浏览器的event对象,需要在前面加$符号

代码示例

<div id="app">
<button type="button" @click="btnClick1()">按钮1</button>
<!-- v-on事件监听的时候,需要传递参数,后面才会添加小括号,没有是可以省略的 -->
<button type="button" @click="btnClick1">按钮1</button>

<button type="button" @click="btnClick2()">按钮2</button>
<!-- 没有传递参数,有小括号只输出undefined -->
<button type="button" @click="btnClick2">按钮2</button>

<!-- 当需要传递参数时,且只有一个参数需要传递,而没有进行传递,会默认输出浏览器的event对象 -->
<button type="button" @click="btnClick3(123,$event)">按钮3</button>
<!-- 当需要传递多个参数时,想要获取浏览器的event对象,需要在前面加$符号 -->
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			counter:0,
		},
		methods:{
     btnClick1(){
			console.log("btnClick1")
		 },
		btnClick2(e){
			console.log(e)
		},
		btnClick3(abc,event){
			console.log("--------",abc,event)		
		}
		},

	})
</script>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页