Vue3中如何让type为number的input获取字符串类型值？

Vue3规定当input的type="number"时，v-model会自动启用number修饰符，将输入值转为数字类型。但如果需要保留前导零（比如订单号这类场景），可以直接绕过v-model的自动类型转换，用以下方式处理：

<template>
  <input 
    type="number" 
    :value="orderNumber" 
    @input="updateOrderNumber"
  />
</template>

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

const orderNumber = ref('');

const updateOrderNumber = (e) => {
  // 输入框的原生value是字符串类型，能完整保留前导零
  orderNumber.value = e.target.value;
};
</script>

这种方式既保留了type="number"唤起数字键盘的特性，又能获取到带前导零的订单号字符串。

内容的提问来源于stack exchange，提问作者Myat Min Soe