vue base64

// 使用 Vue 和 Base64 的示例代码

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

<script>
export default {
  data() {
    return {
      inputText: '',
      encodedText: '',
      decodedText: ''
    };
  },
  methods: {
    encode() {
      this.encodedText = btoa(this.inputText); // 使用 btoa 进行 Base64 编码
    },
    decode() {
      try {
        this.decodedText = atob(this.encodedText); // 使用 atob 进行 Base64 解码
      } catch (err) {
        this.decodedText = '解码失败，输入可能不是有效的 Base64 字符串';
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

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

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

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

   • data 函数返回一个对象，包含三个属性：inputText（用户输入的文本）、encodedText（编码后的结果）和 decodedText（解码后的结果）。
   • methods 中定义了两个方法：
     • encode: 使用浏览器内置的 btoa 函数将输入文本编码为 Base64。
     • decode: 使用浏览器内置的 atob 函数将 Base64 编码的字符串解码回原始文本。如果解码失败，则捕获异常并显示错误信息。

3. 样式部分 (<style scoped>):

   • 可以根据需要自定义样式，这里没有具体的样式规则。

这个示例展示了如何在 Vue.js 中使用浏览器内置的 btoa 和 atob 函数来进行 Base64 编码和解码。