vue3 md5

// 引入 Vue 3 和 crypto-js 库
import { createApp } from 'vue';
import CryptoJS from 'crypto-js';

// 创建一个简单的 Vue 3 组件
const App = {
  data() {
    return {
      message: 'Hello Vue 3 with MD5!',
      hashedMessage: ''
    };
  },
  methods: {
    // 使用 CryptoJS 库对消息进行 MD5 哈希处理
    hashMessage() {
      this.hashedMessage = CryptoJS.MD5(this.message).toString();
    }
  },
  template: `
    <div>
      <p>Original Message: {{ message }}</p>
      <button @click="hashMessage">Hash Message</button>
      <p>Hashed Message: {{ hashedMessage }}</p>
    </div>
  `
};

// 创建并挂载 Vue 应用
const app = createApp(App);
app.mount('#app');

解释说明：

1. 引入库：首先，我们引入了 Vue 3 和 crypto-js 库。crypto-js 是一个用于加密操作的 JavaScript 库，支持多种哈希算法，包括 MD5。
2. 创建 Vue 组件：定义了一个简单的 Vue 组件 App，其中包含 message 和 hashedMessage 两个数据属性。
3. 方法：定义了一个 hashMessage 方法，该方法使用 CryptoJS.MD5 对 message 进行哈希处理，并将结果存储在 hashedMessage 中。
4. 模板：模板中包含一个按钮，点击按钮会调用 hashMessage 方法，并显示原始消息和哈希后的消息。
5. 挂载应用：最后，创建并挂载 Vue 应用到页面中的 #app 元素上。

这样，你就可以在 Vue 3 中使用 MD5 对消息进行哈希处理了。