欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 21:42:39
本文实例讲述了vue实现引入本地json的方法。分享给大家供大家参考,具体如下: 当前需要使用的组件: import data from './test.jso...

本文实例讲述了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程序设计有所帮助。