可以把js中的对象转成url参数的函数介绍(代码实例)
程序员文章站
2022-03-18 14:17:08
...
本篇文章给大家带来的内容是关于可以把js中的对象转成url参数的函数介绍(代码实例)),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。最普通的,封装一个
这个函数呢是自己在写基于Vue+ElementUI管理后台时用到的,,下面列出来两种使用方式:
最普通的,封装一个js
函数
/** * 对象转url参数 * @param {*} data * @param {*} isPrefix */ urlencode (data, isPrefix) { isPrefix = isPrefix ? isPrefix : false let prefix = isPrefix ? '?' : '' let _result = [] for (let key in data) { let value = data[key] // 去掉为空的参数 if (['', undefined, null].includes(value)) { continue } if (value.constructor === Array) { value.forEach(_value => { _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value)) }) } else { _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value)) } } return _result.length ? prefix + _result.join('&') : '' }
在Vue组件化开发时,我是这样写的
写了一个工具文件utils.js,将其作为工具包引入Vue的main.js,并将其附给Vue原型,这样在每个组件中就可以使用this.$utils来使用里面的一些工具函数了
utils.js
文件
const utils = { /** * 对象转url参数 * @param {*} data * @param {*} isPrefix */ urlencode (data, isPrefix = false) { let prefix = isPrefix ? '?' : '' let _result = [] for (let key in data) { let value = data[key] // 去掉为空的参数 if (['', undefined, null].includes(value)) { continue } if (value.constructor === Array) { value.forEach(_value => { _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value)) }) } else { _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value)) } } return _result.length ? prefix + _result.join('&') : '' }, // ....其他函数.... } export default utils
main.js
文件
import Vue from 'vue' import App from './App.vue' import utils from '@/utils/utils' // ...其他代码... Vue.prototype.$utils = utils // ...其他代码...
在使用的时候可以这样写
// ....其他代码 this.$utils.urlencode(this.params) // ...其他代码...
以上就是可以把js中的对象转成url参数的函数介绍(代码实例)的详细内容,更多请关注其它相关文章!
上一篇: 两种css外部文件的引用方式
下一篇: VUE中v-bind的用法介绍