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

项目中会用到将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. Java 种15种锁的介绍:公平锁,可重入锁,独享锁,互斥锁等等…

    Java 中15种锁的介绍 1,在读很多并发文章中,会提及各种各样的锁,如公平锁,乐观锁,下面是对各种锁的总结归纳: 公平锁/非公平锁 可重入锁/不可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲 ...

  2. [C4W4] Convolutional Neural Networks - Special applications: Face recognition & Neural style transfer

    第四周:Special applications: Face recognition & Neural style transfer 什么是人脸识别?(What is face recogni ...

  3. 鲜贝7.3--mysql 下载小问题

    安装mysql 5.7.20 及报错 This application requires Visual Studio 2013 Redistributable 问题原因大体是mysql自动安装的Vis ...

  4. NOIP模拟赛 最佳组合

    题目描述 Description \(Bzeroth\) 大陆最终还是覆灭了,所以你需要为地灾军团服务了. 地灾军团军师黑袍不擅长写题面,所以你只需要看简化版的题意即可. 给定 \(3\) 个长度均为 ...

  5. NOIP模拟赛 迷路

    题目描述 Description \(FYH\) 在 \(ns\) 星系迷路了,情急之下,他找到了你.现在,解救 \(FYH\) 的重任就落在了你的肩上了. \(ns\) 星系有 \(n\) 颗星球, ...

  6. ICP 匹配定位算法学习记录

    icp 算法原理是: 选取目标点云P和源点云Q,按照一定的约束条件,找到最邻近点(pi,qi),然后计算出最优R和t(旋转和平移), 使得误差函数最小,误差函数E(R,t): 基本算法流程: 1.在目 ...

  7. pixijs shader贴图扫光效果

    pixijs shader贴图扫光效果 直接贴代码 const app = new PIXI.Application({ transparent: true }); document.body.app ...

  8. python xpath图片爬取

    import requests from urllib.request import urlretrieve from lxml import etree headers = { 'User-Agen ...

  9. 【10】Nginx:后面有无 / 的区别

    写在前面的话 在 nginx 中,我们很多时候都有一个疑问,在 proxy_pass 或者 root 或者 location 后面需不需要加上 /,加和不加有啥区别. root  / alias 后面 ...

  10. Python - 错误和异常 - 第十九天

    Python 错误和异常 作为 Python 初学者,在刚学习 Python 编程时,经常会看到一些报错信息,在前面我们没有提及,这章节我们会专门介绍. Python 有两种错误很容易辨认:语法错误和 ...