vue实现引入本地json的方法分析

 更新时间:2018年07月12日 12:02:37   作者:佑之以航  
这篇文章主要介绍了vue实现引入本地json的方法,结合实例形式分析了vue.js加载本地json文件及解析json数据相关操作技巧,需要的朋友可以参考下

本文实例讲述了vue实现引入本地json的方法。分享给大家供大家参考,具体如下:

当前需要使用的组件:

import data from './test.json'
  export default{
    data(){
      return{
        userinform: ''
      }
    },
mounted(){
  this.userinform = data
  }
}

test.json就是普通json格式就可以了!然后完美解决!

后台服务器请求json方式:

this.$http.get('url').then(response => {
    //succces callback
    var data = response.body;
  }, response => {
    // error callback
    alert('连接失败!')
  });

附:VUE解析json展示列表页示例

<div class="padding">
   <div id="app">
    <ol>
     <li v-for="site in sites">
      {{ site.name }}
     </li>
    </ol>
    </div>
 </div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
function getJson(url,func){ $.ajax({ type:'get', url:url, dataType: 'json', success: function(data){ if (data.code==0){ var a = data.data.list;func(a); }else{ alert("接口调用失败"); } }, error: function(data){ alert(JSON.stringify(data)); } }); }  
$(function(){ var url = "http://www.test.com/index.php?s=/shop/list/"; getJson(url,pushDom); }); 
function pushDom(data){ var vm = new Vue({
 el: '#app',
 data: {
  sites: data
 }
})} 
</script>

希望本文所述对大家vue.js程序设计有所帮助。

相关文章

  • Vue组件之间传值/调用几种方式

    Vue组件之间传值/调用几种方式

    这篇文章主要介绍了Vue组件之间传值/调用的几种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 在vue和element-ui的table中实现分页复选功能

    在vue和element-ui的table中实现分页复选功能

    这篇文章主要介绍了在vue和element-ui的table中实现分页复选功能,本文代码结合图文的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • Vue中事件总线(eventBus)的深入详解及使用

    Vue中事件总线(eventBus)的深入详解及使用

    在vue项目中父子组件间的通讯很方便,但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦,这时使用eventBus通讯,就可以很便捷的解决这个问题,这篇文章主要给大家介绍了关于Vue中事件总线(eventBus)使用的相关资料,需要的朋友可以参考下
    2022-03-03
  • vue-upload上传图片详细使用方法

    vue-upload上传图片详细使用方法

    这篇文章主要介绍了使用vue-upload上传图片的详细使用说明,文中有相关的代码示例供大家参考,感兴趣的小伙伴一起跟着小编来学习吧
    2023-05-05
  • vue.js云存储实现图片上传功能

    vue.js云存储实现图片上传功能

    示对象存储是腾讯云提供的一种存储海量文件的分布式存储服务,本文主要介绍了用vue.js实现图片上传功能,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue怎样获取当前时间,并且传递给后端(不用注解)

    vue怎样获取当前时间,并且传递给后端(不用注解)

    这篇文章主要介绍了vue怎样获得当前时间,并且传递给后端(不用注解)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue3中如何通过ref和$parent结合defineExpose实现父子组件之间的通信

    vue3中如何通过ref和$parent结合defineExpose实现父子组件之间的通信

    这篇文章主要介绍了vue3中通过ref和$parent结合defineExpose实现父子组件之间的通信,Vue3中通过ref和$parent的结合使用,及defineExpose的方法,可以非常便捷地实现父子组件之间的通信,需要的朋友可以参考下
    2023-07-07
  • 浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    小编最近为了优化vue项目性能,需要使用webpack-bundle-analyzer插件来分析报文件,在网上没有找到合适的,下面小编给大家写出来一个供大家参考
    2019-10-10
  • 详解vue.js的devtools安装

    详解vue.js的devtools安装

    本篇文章主要介绍了详解vue.js的devtools安装 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 基于Vue实例对象的数据选项

    基于Vue实例对象的数据选项

    下面小编就为大家带来一篇基于Vue实例对象的数据选项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论