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 相关文章推荐
js传值 判断
Oct 26 Javascript
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
判断访客终端类型集锦
Jun 05 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
微信小程序实现点赞业务
Feb 10 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
在Python中处理XML的教程
2015/04/29 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
python 实现波浪滤镜特效
2020/12/02 Python
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
编辑个人求职信范文
2013/09/21 职场文书
好听的队名和口号
2014/06/09 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
丽江古城导游词
2015/02/03 职场文书