Vue -- 关于函数调用时加不加括号的问题
Posted Z && Y
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue -- 关于函数调用时加不加括号的问题相关的知识，希望对你有一定的参考价值。
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 -- 关于函数调用时加不加括号的问题的主要内容，如果未能解决你的问题，请参考以下文章
setTimeOut(),和setInterVal()调用函数加不加括号！！！