Vue中关于v-on绑定点击事件时候的参数问题

v-on的绑定点击事件的时候关于参数有三种情况,分别如下 :绑定的方法后面没有括号 <button @click="btnClick">点击</button><script>const app = new Vue({methods:{btnClick(event){// 此时event就是当前点击的对象console.log(event)}}})</scr

xiaoShengSanYue

6279人浏览 · 2020-05-18 14:45:12

xiaoShengSanYue · 2020-05-18 14:45:12 发布

v-on的绑定点击事件的时候关于参数有三种情况,分别如下 :

绑定的方法后面没有括号

 <button @click="btnClick">点击</button>
 <script>
 	const app = new Vue({
 		methods:{
 			btnClick(event){
 			// 此时event就是当前点击的对象
 				console.log(event)
 			}
 		}
 	})
 </script>

绑定的方法后面有括号

<button @click="btnClick()">点击</button>
<script>
	const app = new Vue({
		methods:{
			btnClick(event){
			// 此时event是undefined
				console.log(event)
			}
		}
	})
</script>

绑定的方法后面有括号,需要传递参数

<button @click="btnClick(123)">点击</button>
<script>
	const app = new Vue({
		methods:{
			btnClick(event){
			// 此时event是123
				console.log(event)
			}
		}
	})
</script>

绑定的方法后面有括号,需要传递参数,并且需要当前点击的对象

<!-- 这种情况下,如果需要传递当前点击的对象,参数必须是$event -->
<!-- 第一个位置如果要传数字的话,就不需要加引号,如果要传一个字符串的话,就必须要加引号,因为如果不加引号,Vue就会当做一个变量来解析,此时如果在data中没有定义的话,就会报错 -->
<button @click="btnClick(123,$event)">点击</button>
<script>
	const app = new Vue({
		methods:{
			btnClick(num,event){
			// 此时num是123,event是当前点击的对象,
				console.log(num,event)
			}
		}
	})
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^