提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js3: 使用js-md5 (js-md5@0.7.3 / vue@3.2.26)

VueJS 26 3.2 MD5 js3 使用
2023-09-14 08:59:32 时间

一，安装js-md5

1，用npm安装
liuhongdi@lhdpc:/data/vue/demo1$ npm install --save js-md5
 
added 1 package in 5s
 
21 packages are looking for funding
  run `npm fund` for details
2,查看js-md5的版本:
liuhongdi@lhdpc:/data/vue/demo1$ npm list js-md5
demo1@0.1.0 /data/vue/demo1
└── js-md5@0.7.3

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，编写js代码:

<template>
  <div style="text-align: left;">
    原字符串：{{origStr}}<br/>
    md5字符串:{{md5Str}}
  </div>
</template>
 
<script>
import {ref} from "vue";
import md5 from 'js-md5';
export default {
  name: "Md5",
  setup() {
    const origStr = ref("");
    const md5Str = ref("");
    //调用md5
    const setStr = () => {
      origStr.value = "我是老刘";
      md5Str.value = md5(origStr.value);
    }
    setStr();
    return {
      origStr,
      md5Str,
    }
  }
}
</script>
 
<style scoped>
 
</style>

三，测试效果 

四，查看vue.js版本:

liuhongdi@lhdpc:/data/vue/demo1$ npm list vue
demo1@0.1.0 /data/vue/demo1
├─┬ @vue/cli-plugin-babel@4.5.15
│ └─┬ @vue/babel-preset-app@4.5.15
│   └── vue@3.2.26 deduped
├─┬ element-plus@1.2.0-beta.6
│ ├─┬ @element-plus/icons-vue@0.2.4
│ │ └── vue@3.2.26 deduped
│ ├─┬ @vueuse/core@7.4.1
│ │ ├─┬ @vueuse/shared@7.4.1
│ │ │ └── vue@3.2.26 deduped
│ │ ├─┬ vue-demi@0.12.1
│ │ │ └── vue@3.2.26 deduped
│ │ └── vue@3.2.26 deduped
│ └── vue@3.2.26 deduped
└─┬ vue@3.2.26
  └─┬ @vue/server-renderer@3.2.26
    └── vue@3.2.26 deduped

 

相关文章