成都网站建设设计

将想法与焦点和您一起共享

VUE中状态控制与延时加载刷新的示例分析-创新互联

这篇文章主要介绍VUE中状态控制与延时加载刷新的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联专业为企业提供湖口网站建设、湖口做网站、湖口网站设计、湖口网站制作等企业网站建设、网页设计与制作、湖口企业网站模板建站服务,十年湖口做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

在实际项目中,我们经常会遇到这种状况,某些数据我们希望等到需要的时候再去获取,或者某些数据我们需要刷新,但是不必立刻刷新,而是延时到展示的时候再去刷新。

在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}}     
          //刷新mixin     var refreshMixin = {       props: ['refresh'],       watch: {         //状态监视         'refresh': function (val) {           //console.log(val)           //刷新列表           val && this.refreshData()         },       },       created: function () {         this.refresh && this.refreshData()       },     }     //延时加载数据组件     var delayComp = Vue.extend({       template: '#delayTempl',       mixins: [refreshMixin],       props: ['num'],       methods: {         refreshData: function () {           var self = this           //注意,refresh状态使用双向绑定,并且在调用refreshData方法时立刻将refresh状态置为false,以便下次调用           self.refresh = false           setTimeout(function () {             self.num++           }, 5000)         },       },     })     //根实例     var vm = new Vue({       el: '#root',       data: {         testRefresh: false,         num: 0,       },       methods: {         refreshTest: function () {           this.testRefresh = true         }       },       components: {         delayTest: delayComp,       }     })   

以上是“VUE中状态控制与延时加载刷新的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文标题:VUE中状态控制与延时加载刷新的示例分析-创新互联
网站路径:http://chengdu.cdxwcx.cn/article/deocgg.html

其他资讯