这篇文章我们一起来了解vue绑定函数的方法,本文给大家分享了两种方法,下文有具体的介绍及示例代码供大家参考,有这方面学习需求的朋友可以参考看看。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
vuejs中的事件绑定,使用<v-on:事件名 = 函数名>
来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法.
事件绑定的方式
(1) 内联直接把js写在标签上调用方法
<button v-on:click="alert('hi')">执行方法的第一种写法</button>
(2)调用methods里定义的方法
<button v-on:click="run()">执行方法的第一种写法</button> <button @click="run()">执行方法的 简写 写法</button>
export default { data () { return { msg: '你好vue', list:[] } }, methods:{ run:function(){ alert('这是一个方法'); } } }
方法传参,方法直接在调用时在方法内传入参数
<button @click="deleteData('111')">执行方法传值111</button> <button @click="deleteData('222')">执行方法传值2222</button>
deleteData(val){ alert(val); },
传入事件对象
<button data-aid='123' @click="eventFn($event)">事件对象</button>
eventFn(e){ console.log(e); // e.srcElement dom节点 e.srcElement.style.background='red'; console.log(e.srcElement.dataset.aid); /*获取自定义属性的值*/ }
关于vue绑定函数方法就介绍到这了,希望大家阅读完这篇文章能有所收获,想要了解更多vue绑定函数方法的内容,请关注群英网络其它相关文章。
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595