vue3 base64

// 使用 Vue 3 和 Base64 编码解码的示例

<template>
  <div>
    <h1>Base64 编码解码示例</h1>
    <input v-model="inputText" placeholder="输入文本" />
    <button @click="encode">编码</button>
    <button @click="decode">解码</button>
    <p>结果: {{ result }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputText = ref('');
    const result = ref('');

    const encode = () => {
      if (inputText.value) {
        result.value = btoa(inputText.value);
      } else {
        result.value = '请输入文本';
      }
    };

    const decode = () => {
      if (inputText.value) {
        try {
          result.value = atob(inputText.value);
        } catch (e) {
          result.value = '无效的 Base64 字符串';
        }
      } else {
        result.value = '请输入文本';
      }
    };

    return {
      inputText,
      result,
      encode,
      decode,
    };
  },
};
</script>

解释说明：

1. 模板部分 (<template>)：

   • 包含一个输入框 (<input>) 用于输入要编码或解码的文本。
   • 两个按钮分别用于触发编码和解码操作。
   • 显示编码或解码后的结果。

2. 脚本部分 (<script>)：

   • 使用 ref 来创建响应式变量 inputText 和 result。
   • 定义了两个方法 encode 和 decode，分别用于将输入文本进行 Base64 编码和解码。
   • btoa 函数用于 Base64 编码，atob 函数用于 Base64 解码。
   • 如果输入为空或解码失败，会给出相应的提示信息。

这个示例展示了如何在 Vue 3 中使用 Base64 编码和解码。