好久没来写东西了,主要是一直在加班,哼哼,不开心

项目中会用到将xml文件解析成json文件在页面中显示出来,以前jq的时候用到的方法行不通了,故在这边介绍一种我觉得还不错的插件

1. npm安装

npm i x2js

2.在main.js中引用

import x2js from 'x2js' //xml数据处理插件
Vue.prototype.$x2js = new x2js() //创建x2js对象,挂到vue原型上

3.在组件中使用

 _getVersion(url) {
this.loading = true;
let _self = this;
this.$ajax.get(`/data/version${url}.xml`).then(function(res) {
_self.loading = false;
console.log(res.data);
/* var x2js = new X2JS();*/
/* var obj = x2js.xml_str2json(res.data).note;*/
var jsonObj = _self.$x2js.xml2js(res.data);
console.log("-----");
console.log(jsonObj.note);
_self.tableData = jsonObj.note.specialityList.item;
_self.changeData = jsonObj.note.changeList.item;
_self.finishData = jsonObj.note.finishedPunchList.item;
_self.knownData = jsonObj.note.questionList.item;
_self.versionDes = jsonObj.note.name;
_self.versionDate = jsonObj.note.date; })
.catch(function(err) {
console.log(err)
_self.loading = false;
});
}

注意:你的xml文件如果是放在前端这边的话,要把文件放到public文件夹当中,否则文件将会报404的错

vue如何解析xml文件 x2js的更多相关文章

  1. Android 解析XML文件和生成XML文件

    解析XML文件 public static void initXML(Context context) { //can't create in /data/media/0 because permis ...

  2. JAVA使用SAX解析XML文件

    在我的另一篇文章(http://www.cnblogs.com/anivia/p/5849712.html)中,通过一个例子介绍了使用DOM来解析XML文件,那么本篇文章通过相同的XML文件介绍如何使 ...

  3. JAVA中使用DOM解析XML文件

    XML是一种方便快捷高效的数据保存传输的格式,在JSON广泛使用之前,XML是服务器和客户端之间数据传输的主要方式.因此,需要使用各种方式,解析服务器传送过来的信息,以供使用者查看. JAVA作为一种 ...

  4. java中采用dom4j解析xml文件

    一.前言 在最近的开发中用到了dom4j来解析xml文件,以前听说过来解析xml文件的几种标准方式:但是从来的没有应用过来,所以可以在google中搜索dmo4j解析xml文件的方式,学习一下dom4 ...

  5. XML:使用DOM技术解析xML文件中的城市,实现select级联选择

    中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...

  6. dom4j如何解析XML文件

    最近在 一些对xml文件的操作,下面简单写一个dom4j解析xml文件并将其封装到一个javabean中的例子,只是具有针对性的,不是通用的,仅供参考哦~~ 首先说:dom4j是一个java的XML ...

  7. java解析XML文件

    dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点,同时它也是一个开放源 ...

  8. Android开发学习---使用XmlPullParser解析xml文件

    Android中解析XML的方式主要有三种:sax,dom和pull关于其内容可参考:http://blog.csdn.net/liuhe688/article/details/6415593 本文将 ...

  9. SAX解析xml文件

    需要做一个银行名字的列表. 因为有很多,所以想到了用xml来保存,然后uongDAX解析. public class BankSelectActivity extends BaseActivity{ ...

随机推荐

  1. 一套从alpine基本镜像到node8.16.2的全套dockerfile

    这个花了点时间,可以正式跑起来了. 加了常用的工具及中文时区,非root帐号. 除了pm2,其它的module放到应用程序本身的node_modules目录下来实现的. 一,3rd_part/node ...

  2. 面试必备的13道可以举一反三的Vue面试题

    Vue框架部分我们会涉及一些高频且有一定探讨价值的面试题,我们不会涉及一些非常初级的在官方文档就能查看的纯记忆性质的面试题,比如: *   vue常用的修饰符? *   vue-cli 工程常用的 n ...

  3. c# WF 第10节 textbox 控件

    本节内容: 1:textbox 在哪里 2:textbox 的属性 1:textbox 在哪里 2:textbox 的属性 3:实例 实现如下: 步骤1 :7个label  2个textbox 步骤2 ...

  4. day71_10_16多表断关联

    ---恢复内容开始--- 本次环境: 配置settings INSTALLED_APPS = [ # ... 'rest_framework', ] DATABASES = { 'default': ...

  5. Jsoup获取部分页面数据失败 Unhandled content type. Must be text/*, application/xml, or application/xhtml+xml

    用Jsoup在获取一些网站的数据时,起初获取很顺利,但是在访问某浪的数据是Jsoup报错,应该是请求头里面的请求类型(ContextType)不符合要求. 请求代码如下: private static ...

  6. 20191031 Codeforces Round #539 (Div. 1) - Virtual Participation

    这场怎么全是数据结构题...

  7. 选择排序法(C语言)

    基本思路 在每一次的排序中选出最小(或最大)的数,将其放在数组最前端,然后在后面的数中重复此步骤,最终达到排序的目的. 算法描述 将存于数组首位数与后面的数依次比较,将其中的较小的数放到数组放到数组首 ...

  8. 【2019.8.11上午 慈溪模拟赛 T3】欢迎回来(back)(设阈值+莫队)

    设阈值 考虑对于询问的\(d\)设阈值进行分别处理. 对于\(d\le\sqrt{max\ d}\)的询问,我们可以\(O(n\sqrt{max\ d})\)预处理答案,\(O(1)\)输出. 对于\ ...

  9. C++ 实现 查找进程, 杀死进程, 启动进程, 进程重启

    头文件: #include <Windows.h>#include <tlhelp32.h>#include <tchar.h>#include <Shell ...

  10. 这几款我私藏的Markdown编辑器,今天分享给你

    相信很多人都使用 Markdown 来编写文章,Markdown 语法简洁,使用起来很是方便,而且各大平台几乎都已支持 Markdown 语法 那么,如何选择一款趁手的 Markdown 编辑器,就是 ...