在vue中使用Base64转码的案例

 更新时间:2020年08月07日 10:56:33   作者:涼皮Herr  
这篇文章主要介绍了在vue中使用Base64转码的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在vue项目中有时会使用到Base6464转码,现将自己使用的一种方法记录,以供参考

1:安装依赖

npm install --save js-base64

2:在main.js中引入

const Base64 = require('js-base64').Base64
new Vue({
 el: '#app',
 Base64
})

3:在需要转码的文件中使用

const Base64 = require('js-base64').Base64
const exStr = Base64.encode('base64')
console.log(exStr) // 'YmFzZTY0'

补充知识:vue中使用base64和md5

1.在项目根目录下安装

cnpm install --save js-base64

cnpm install --save js-md5

2.在项目文件中引入

import md5 from 'js-md5';

let Base64 = require('js-base64').Base64;

3.在项目文件中使用

base64:

Base64.encode('dankogai'); // ZGFua29nYWk=

Base64.decode('ZGFua29nYWk='); // dankogai

md5:

md5(''); // d41d8cd98f00b204e9800998ecf8427e

eg:

<script type="text/ecmascript-6">
 let Base64 = require('js-base64').Base64;    //Base64.encode('小飼弾');Base64.decode('ZGFua29nYWk=');
export default {
    data () {
      return {},
     },
     methods: {
       openFun: function(){
           let urlStr = "token=11526538-0059-4199-b35b-4e77263cdda9&pageId=31&unionId=165";
           urlStr = Base64.encode(urlStr);
       }
     }
}
</script>

以上这篇在vue中使用Base64转码的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue操作数组的几种常用方法小结

    Vue操作数组的几种常用方法小结

    本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下
    2023-09-09
  • Vue el-table组件如何实现将日期格式化

    Vue el-table组件如何实现将日期格式化

    这篇文章主要介绍了Vue el-table组件如何实现将日期格式化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vuex实现简单的购物车功能

    vuex实现简单的购物车功能

    这篇文章主要为大家详细介绍了vuex实现简单的购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • Vue.JS入门教程之事件监听

    Vue.JS入门教程之事件监听

    这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue3+pinia用户信息持久缓存token的问题解决

    vue3+pinia用户信息持久缓存token的问题解决

    本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 一文教你解决Vue所有报错

    一文教你解决Vue所有报错

    Vue是一个流行的前端框架,许多web开发人员使用Vue来构建他们的应用程序。然而,正如任何其他框架一样,Vue也可能会发生错误。在这篇技术文章中,我们将探讨Vue常见的报错以及如何解决它们
    2023-03-03
  • vue axios中的get请求方式

    vue axios中的get请求方式

    这篇文章主要介绍了vue axios中的get请求方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue uni-app以H5模式引入Jquery配置教程

    Vue uni-app以H5模式引入Jquery配置教程

    这篇文章主要为大家介绍了Vue uni-app以H5模式引入Jquery配置教程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue3+vite+ts父子组件之间的传值

    vue3+vite+ts父子组件之间的传值

    随着vue2的落幕,vue3越来成熟,有必要更新一下vue3的父子组件之间的传值方式,这里介绍下vue3+vite+ts父子组件之间的传值方式实例详解,感兴趣的朋友一起看看吧
    2023-12-12

最新评论