vue3 输入框数值转为汉字显示

在 Vue3 中，可以使用计算属性和数组来将输入框中的数值转换为汉字进行显示。示例代码如下：

<template>
  <div>
    <label for="input">请输入数字：</label>
    <input type="number" id="input" v-model="num">
    <p>您输入的数字是：{{chineseNum}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    }
  },
  computed: {
    chineseNum() {
      const chineseArr = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      const numStr = this.num.toString()
      let result = ''
      for (let i = 0; i < numStr.length; i++) {
        result += chineseArr[numStr.charAt(i)]
      }
      return result
    }
  }
}
</script>

在上述示例中，我们定义了一个计算属性 `chineseNum` 来将输入框中的数值转换为汉字进行显示。在计算属性中，我们首先定义了一个汉字数组 `chineseArr`，用于将数字转换为相应的汉字。然后将输入框中的数值转换为字符串，并遍历每一位数字，将其转换为相应的汉字，并拼接到 `result` 变量中。最后将 `result` 返回即可。