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


Posted in Javascript onJuly 12, 2018

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

Javascript 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
JS实现将二维数组转为json格式字符串操作示例
Jul 12 #Javascript
vue路由组件按需加载的几种方法小结
Jul 12 #Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 #Javascript
教你如何用node连接redis的示例代码
Jul 12 #Javascript
angular 内存溢出的问题解决
Jul 12 #Javascript
You might like
DOMXML函数笔记
2006/10/09 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php截取字符串函数分享
2015/02/02 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
Javascript Object.extend
2010/05/18 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
Typescript的三种运行方式(小结)
2019/09/18 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
python中使用序列的方法
2015/08/03 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
软件测试常见笔试题
2012/02/04 面试题
外贸业务员工作职责
2014/01/06 职场文书
初中政治教学反思
2014/01/17 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
招商银行收入证明
2015/06/17 职场文书
运动会主持词大全
2015/07/02 职场文书