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 建立对象的方法
Apr 21 Javascript
加载jQuery后$冲突的解决办法
Jul 09 Javascript
JS分页效果示例
Oct 11 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
关于php mvc开发模式的感想
2011/06/28 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
javascript整除实现代码
2010/11/23 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
wxPython实现带颜色的进度条
2019/11/19 Python
django修改models重建数据库的操作
2020/03/31 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python中doctest库实例用法
2020/12/31 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
五一手机促销方案
2014/03/08 职场文书
出国留学计划书
2014/04/27 职场文书
导师工作推荐信范文
2014/05/17 职场文书
市场营销专业求职信
2014/06/17 职场文书
安全口号大全
2014/06/21 职场文书
地球一小时活动总结
2015/02/27 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书