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://bzwzjz.com/article/ddigdj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 重庆电商网站建设 重庆企业网站建设 手机网站制作 做网站设计 成都网站建设 古蔺网站建设 重庆网站建设 成都网站制作 响应式网站设计 网站建设 手机网站建设 定制网站建设 成都网站建设 广安网站设计 手机网站制作 成都网站设计 企业网站设计 网站设计制作报价 高端网站设计 成都网站制作 网站设计 手机网站设计