qs.js库使用方法

1、qs.js库说明

qs是一个url参数转化（parse和stringify）的js库。

https://www.npmjs.com/package/qs

2、使用（以vue文件做示例）

（1）基本语法

<template>
<div>
qs.js
</div>
</template>
<script>
import qs from 'qs'
import _ from 'lodash'
export default {
components: {},
methods: {
qs() {
var obj = qs.parse('a=b&c=d');
//输出true
                console.log(_.isEqual(obj, {
a: 'b',
c: 'd'
}))
var str = qs.stringify(obj);
//输出true
console.log(_.isEqual(str, 'a=b&c=d'));
}
},
mounted() {
this.qs();
}
};
</script>
<style scoped>
</style>

（2）忽略符号?

<template>
<div>
qs.js
</div>
</template>
<script>
import qs from 'qs'
import _ from 'lodash'
export default {
components: {},
methods: {
qs() {
//忽略前面的？
var obj = qs.parse('?a=b&c=d', { ignoreQueryPrefix: true });
//输出true
console.log(_.isEqual(obj, {
a: 'b',
c: 'd'
}))
var str = qs.stringify(obj);
//输出true
console.log(_.isEqual(str, 'a=b&c=d'));
}
},
mounted() {
this.qs();
}
};
</script>
<style scoped>
</style>

（3）stringify方法编码

<template>
<div>
qs.js
</div>
</template>
<script>
import qs from 'qs'
import _ from 'lodash'
export default {
components: {},
methods: {
qs() {
//输出a[b]=c
console.log(qs.stringify({
a: {
b: 'c'
}
}, {
encode: false
}))
}
},
mounted() {
this.qs();
}
};
</script>
<style scoped>
</style>

（4）qs 处理数组

<template>
<div>
qs.js
</div>
</template>
<script>
import qs from 'qs'
import _ from 'lodash'
export default {
components: {},
methods: {
qs() {
//输出 'a[0]=b&a[1]=c&a[2]=d'
console.log(qs.stringify({
a: ['b', 'c', 'd']
}))
//输出 a[0]=b&a[1]=c&a[2]=d
console.log(qs.stringify({
a: ['b', 'c', 'd']
}, {
encode: false
}))
//输出 'a=b&a=c&a=d'
console.log(qs.stringify({
a: ['b', 'c', 'd']
}, {
indices: false
}))
}
},
mounted() {
this.qs();
}
};
</script>
<style scoped>
</style>

更多专业前端知识，请上【猿2048】www.mk2048.com

qs.js库使用方法相关推荐

使用Google CDN的JSAPI服务来提供加载各类JS库的方法
例如jQuery.Prototype库等 2012-02-17 09:17:56 | 56次阅读 | 评论:0 条 | itokit jQuery,让我们控制页面元素更加方便快捷,让我们在编写js的时 ...
jQuery避免$符和其他JS库冲突的方法对比
jQuery避免$符和其他JS库冲突的方法对比 1.如果jquery库在第三方库之后引用.这个时候jquery库会占用$. 解决办法:剔除$符号的使用权. <script type=" ...
前端高效开发必备的 js 库梳理
之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标, ...
常用的 JS库总结
文章目录 zopto OwlCarousel swiper.js superslide moment.js qs.js wow.js ScrollReveal html2canvas zy.media ...
JS+库+框架+工具
JS+库+框架+工具要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,CSS,JavaScript(简称JS),那首先先明确这三个概念: HTML负责结构 ...
移动开发框架，第【二】弹：Hammer.js 移动设备触摸手势js库
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
MV* 框架与 DOM操作为主 JS库的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库与 MV* 框架的对比案例(MV* 框架与 DOM操作 JS库实例对比) 购物车页面 ...
自己写js库，怎么支持AMD
最近我打算把之前做项目写的一些工具集成到一个js库中,但是库既要在普通环境正常运行,又要在AMD环境下不暴露全局变量.一时间挺头疼的.随即我参考了一些现在流行的库的源码.学着写了一下,感觉还不错. 既 ...
贡献一个连jquery都觉的大的时候可以用的 js库
在一些很小的项目里,连用jquery都还觉的大的时候,你就可以用我的这个库了. 一个库或者框架,是应需求而生的,当你的项目实际上只需要简单的一个好用的选择器一个ajax 封装一个兼容的事件封装的时 ...

qs.js库使用方法

qs.js库使用方法相关推荐

最新文章

热门文章

qs.js库 使用方法

qs.js库 使用方法相关推荐

最新文章

热门文章

qs.js库使用方法

qs.js库使用方法相关推荐