vue事件绑定中如何调用data中的变量

本文探讨了在Vue.js开发中遇到的事件绑定函数如何访问data中的变量问题。作者指出,通过在事件处理函数前使用`bind(this)`方法,可以确保函数内部能正确引用Vue实例的上下文,从而顺利访问和修改data中的数据。示例代码展示了在mouseover和mouseout事件中如何使用这种方法来控制marquee变量,实现了与Vue实例的无缝结合。
摘要由CSDN通过智能技术生成

vue可以与javascript无缝绑定,但是事件绑定中的函数如何调用data中的变量和数据却是一个难题,曾经让很多人颇为困扰。

                  func1(){
                    ....
                    func_over = function (event) {
                        {#console.log("over: " + _marquee)#}
                        clearInterval(_marquee)
                        console.log(event)
                    }

                    func_out = function (event) {
                        {#console.log("out: " + _marquee)#}
                        _marquee = setInterval(Marquee, speed)
                        this.marquee = _marquee
                        console.log(_marquee, this.marquee, this.qingfu)
                        console.log(event)
                    }

                    ...

                    
                    demo.addEventListener("mouseover", func_over)
                    demo.addEventListener("mouseout", func_out)

其实处理起来非常简单,添加事件处理之前使用如下语句与vue主体绑定即可:

func_out = func_out.bind(this)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值