基于 Vue 3 实现一个简单的“数字转换器”游戏，用户输入一个数字后，可以选择将其转换为二进制或十六进制，并显示转换后的结果。 要求： • 用户输入一个正整数。 • 用户可以选择“转换为二进制”或“转换为十六进制”。 • 根据选择显示相应的转换结果。

基于 Vue 3 的数字转换器游戏示例可以按照以下步骤创建：

1. **项目初始化**：
使用 Vue CLI 创建一个新的项目，例如 `vue create digit-converter`。

2. **组件结构**：
- 主要组件（如 App.vue）将包含输入框、转换选项按钮和显示结果的部分。

   <template>
     <div>
       <input v-model="number" type="number" placeholder="请输入正整数">
       <button @click="convertToBinary">转为二进制</button>
       <button @click="convertToHexadecimal">转为十六进制</button>
       <p>转换结果：{{ convertedResult }}</p>
     </div>
   </template>

3. **数据绑定**：
添加数据属性来保存用户输入和转换结果。

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

   const number = ref(0);
   let convertedResult;

   function convertToBinary() {
     if (number.value > 0) {
       convertedResult = binaryConversion(number.value);
       console.log(convertedResult); // 这里你可以选择在控制台打印结果，实际应用中显示在页面上
     }
   }

   function convertToHexadecimal() {
     if (number.value > 0) {
       convertedResult = hexadecimalConversion(number.value);
       // 同样，在这里处理并显示结果
     }
   }
   </script>

4. **转换函数**：
- 对应地添加二进制和十六进制的转换函数（假设这两个函数已实现）。

   // 假设存在这两个函数
   function binaryConversion(num) {
     return num.toString(2);
   }

   function hexadecimalConversion(num) {
     return num.toString(16).toUpperCase();
   }

5. **样式**：
可以通过 CSS 来美化输入框和按钮。

现在，当用户输入一个正整数并点击转换按钮，会相应地显示其二进制或十六进制形式的结果。