VUE中状态控制与延时加载刷新的示例分析
这篇文章主要介绍VUE中状态控制与延时加载刷新的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
十余年的叙永网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同,自动调整叙永建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“叙永网站设计”,“叙永网站推广”以来,每个客户项目都认真落实执行。
在实际项目中,我们经常会遇到这种状况,某些数据我们希望等到需要的时候再去获取,或者某些数据我们需要刷新,但是不必立刻刷新,而是延时到展示的时候再去刷新。
在DOM操作的年代,想要实现这样的功能可能会稍微麻烦一些,然而当我们使用数据驱动的mv*框架的时候,这个想要实现这个需求就容易了许多。
当我们理解数据驱动时,我们很容易想到将需要刷新的状态也设置成为某个数据,在需要刷新的地方watch这个数据,当刷新状态发生变动的时候,watch生效并执行刷新的方法,这就实现了延时刷新。而且我们不再需要关注延时的过程,只需要更改刷新状态就可以了。
现在我们用Vue来实现一个状态驱动的延时刷新。
首先我们利用vue的混合来实现一个统一的刷新接口,你可以把混合理解成一种特殊的继承来使用。
//刷新mixin var refreshMixin = { props: ['refresh'], watch: { //状态监视 'refresh': function (val) { //console.log(val) //刷新列表 val && this.refreshData() }, }, created: function () { this.refresh && this.refreshData() }, }
在这个refreshMixin中,当组建创建或者refresh状态发生变更时,判断状态是否是true,如果是true,则调用组建的refreshData方法。
我们在组建当中混合这个refreshMixin,并且实现refreshData方法,就可以实现状态驱动刷新。
注意,refresh状态使用双向绑定,并且在调用refreshData方法时立刻将refresh状态置为false,以便下次调用。
下面给予一个完整的demo
延时加载数据: {{num}}
以上是“VUE中状态控制与延时加载刷新的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站标题:VUE中状态控制与延时加载刷新的示例分析
转载源于:http://scyanting.com/article/ghhjhe.html