vue base64解码

// 使用 Vue.js 进行 Base64 解码的示例代码

<template>
  <div>
    <textarea v-model="input" placeholder="请输入Base64编码的字符串"></textarea>
    <button @click="decode">解码</button>
    <p>解码结果: {{ decoded }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      decoded: ''
    };
  },
  methods: {
    decode() {
      try {
        // 使用 atob 函数进行 Base64 解码
        this.decoded = atob(this.input);
      } catch (error) {
        this.decoded = '解码失败，请检查输入';
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

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

   • 包含一个 textarea 输入框，用于用户输入 Base64 编码的字符串。
   • 一个按钮，点击时触发 decode 方法进行解码。
   • 一个段落显示解码后的结果。

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

   • data 函数返回两个数据属性：input 用于存储用户输入的 Base64 字符串，decoded 用于存储解码后的结果。
   • methods 中定义了 decode 方法，使用 JavaScript 内置的 atob 函数对 Base64 字符串进行解码。如果解码失败，则捕获异常并显示错误信息。

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

   • 可以根据需要自行添加样式，这里未提供具体样式。

希望这个示例对你有帮助！