Vue -- 关于函数调用时加不加括号的问题

1. 关于函数调用时加不加括号的问题1.1 函数不传参:1.1.1 调用时不加()如果函数不传参，推荐不加括号，示例:<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>事件的基本使用</title><script t

CodeJiao

2808人浏览 · 2021-09-12 15:09:19

CodeJiao · 2021-09-12 15:09:19 发布

1. 关于函数调用时加不加括号的问题

1.1 函数不传参:

1.1.1 调用时不加()

如果函数不传参，推荐不加括号，示例:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>事件的基本使用</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- <button v-on:click="showInfo">点我提示信息</button> -->
		<button @click="showInfo1">点我提示信息1（不传参）</button></button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		// 只有在data中的数据才会进行数据代理
		data: {
			name: 'CQUT',
		},
		methods: {
			showInfo1(event) {
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert(event)
				alert('同学你好！')
			}
		}
	})
</script>

</html>

运行结果:

在这里插入图片描述

结论:

我们发现在调用方法时不加()，则默认也会把event事件对象传递过来
于是我们可以根据事件对象进行一些操作，例如：

现在的运行结果:

在这里插入图片描述

1.1.2 调用时加()

在这里插入图片描述

运行结果:

在这里插入图片描述

结论:

我们发现调用函数时，如果加上（），则默认不会把event对象传递过来。因为这里用到了event对象，所有程序会报错

手动传入event对象

在这里插入图片描述

现在的运行结果:

在这里插入图片描述

1.1.3 小结

如果函数不需要传参，则推荐不加上（），否则需要手动传入event对象，防止程序报错。
@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

1.2 函数传参

如果函数传参，则必须加上（）

示例代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>事件的基本使用</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			name: 'CQUT',
		},
		methods: {
			showInfo2(event, number) {
				console.warn('event: ' + event);
				console.warn('number: ' + number);
			}
		}
	})
</script>

</html>

运行结果:

在这里插入图片描述

补充:

在这里插入图片描述

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}$/, //不连续的两位字母// /^