VUE3写一个16进制与字符串相互转换的页面

好的，我可以为您提供一些简单的代码示例来实现该功能。

首先，您需要一个文本框用于输入十六进制字符串，以及一个按钮来触发转换操作。代码示例如下所示：

<template>
  <div>
    <label>输入十六进制字符串：</label>
    <input type="text" v-model="hexString"/>

    <button @click="hexToString">转换为字符串</button>
    <button @click="stringToHex">转换为十六进制</button>

    <div v-if="result">
      转换结果：<br>
      {{ result }}
    </div>
  </div>
</template>

接下来是相关的 Vue 组件代码。`hexString` 变量用于绑定输入框中的值，`result` 变量用于存储转换结果。

<script>
export default {
  data() {
    return {
      hexString: '',
      result: ''
    }
  },
  
  methods: {
    hexToString() {
      // 把十六进制字符串转换成字符串
      const str = this.hex2str(this.hexString);
      this.result = str;
    },
    
    stringToHex() {
      // 把字符串转换成十六进制字符串
      const hex = this.str2hex(this.hexString);
      this.result = hex;
    },
    
    hex2str(hex) {
      let result = '';
      for (let i = 0; i < hex.length; i += 2) {
        const charCode = parseInt(hex.substr(i, 2), 16);
        result += String.fromCharCode(charCode);
      }
      return result;
    },
    
    str2hex(str) {
      let result = '';
      for (let i = 0; i < str.length; i++) {
        const charCode = str.charCodeAt(i);
        const hexCode = charCode.toString(16);
        result += hexCode;
      }
      return result;
    }
  }
}
</script>

`hex2str` 方法将输入的十六进制字符串转换成字符串，`str2hex` 方法将输入的字符串转换成十六进制字符串。这两个方法都将转换结果存储在 `result` 变量中。

代码示例只是简单实现了该功能，您可以根据自己的需要对其进行修改。