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=bc=d‘);
                //输出true
                console.log(_.isEqual(obj, {
                    a: ‘b‘,
                    c: ‘d‘
                }))

                var str = qs.stringify(obj);
                //输出true
                console.log(_.isEqual(str, ‘a=bc=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=bc=d‘, { ignoreQueryPrefix: true });
//输出true
console.log(_.isEqual(obj, {
a: ‘b‘,
c: ‘d‘
}))

var str = qs.stringify(obj);
//输出true
console.log(_.isEqual(str, ‘a=bc=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%5B0%5D=ba%5B1%5D=ca%5B2%5D=d‘
console.log(qs.stringify({
a: [‘b‘, ‘c‘, ‘d‘]
}))
//输出 a[0]=ba[1]=ca[2]=d
console.log(qs.stringify({
a: [‘b‘, ‘c‘, ‘d‘]
}, {
encode: false
}))
//输出 ‘a=ba=ca=d‘
console.log(qs.stringify({
a: [‘b‘, ‘c‘, ‘d‘]
}, {
indices: false
}))
}
},
mounted() {
this.qs();
}
};
/script

style scoped

/style

qs.js库 使用方法

原文地址:https://www.cnblogs.com/mengfangui/p/9639564.html


最新回复(0)
/jishuhGfz0m5_2BP88VrNLwHUwcNnabQcNB4iJNaXUrnQ_3D_3D3421539
8 简首页