vue异步axios如何实现获取数据渲染到页面

小编给大家分享一下vue异步axios如何实现获取数据渲染到页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

专注于为中小企业提供成都网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业定安免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

index.vue

忽略坑人的传参方式。。。

 created(){
  this.init()
  this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001"}').then((res) => {
   this.$nextTick(()=>{
    this.$store.state.retData = res.data.retdata
   })
  })
 },

在创建时获取数据,将其存入store

加入页面只能这样写

equip.vue

       规格信息    
  •     设备惯用名     {{equipData.convent_eq}}    
  •     
  •      设备名称      {{equipData.eq_name}}     
  •     
  •      规格型号      {{equipData.modelno}}     
  •         采购价格     {{equipData.cost_purchase}}       

可以这样写,computed 属性,当equipData发生变化时,页面会自动渲染,如果数据没有获取到,默认它为空,这样就不会报错

computed:{
   equipData:function () {
    return this.$store.state.retData.eqInfo||''
   }
  },

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

以上是“vue异步axios如何实现获取数据渲染到页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前文章:vue异步axios如何实现获取数据渲染到页面
文章起源:http://myzitong.com/article/iheicg.html