Vue：绑定v-model的数字输入框如何根据分钟数切换时分显示格式？

问题分析 #

1. 原代码中v-model直接绑定数字类型的minutes，无法展示带单位的格式化文本
2. 加减按钮的函数仅修改参数，未更新响应式变量，导致数值无变化
3. number类型输入框无法显示非数字字符，需改用text类型并处理输入验证

完整实现代码 #

模板部分 #

<span class="input-wrapper">
  <button
    id="decrement"
    @click.prevent="clickDecrement"
  >
    <img
      alt="减少15分钟"
      class="min-icon"
      :src="minIcon"
    />
  </button>
  <span class="flex white-bg">
    <input
      id="quantity"
      type="text"
      :value="formattedMinutes"
      @input="handleInput"
    />
  </span>
  <button
    id="increment"
    @click.prevent="clickIncrement"
  >
    <img
      alt="增加15分钟"
      class="min-icon"
      :src="plusIcon"
    />
  </button>
</span>

脚本部分（TypeScript） #

import { ref, computed } from 'vue';

// 初始化分钟数，可根据需求调整
const minutes = ref(59);

// 格式化分钟数为展示文本
const formattedMinutes = computed(() => {
  if (minutes.value <= 60) {
    return `${minutes.value}m`;
  }
  const hours = Math.floor(minutes.value / 60);
  const remainingMins = minutes.value % 60;
  return `${hours}h ${remainingMins}m`;
});

// 减少15分钟，确保不小于1
const clickDecrement = () => {
  minutes.value = Math.max(1, minutes.value - 15);
};

// 增加15分钟
const clickIncrement = () => {
  minutes.value += 15;
};

// 处理用户输入，提取数字并更新分钟数
const handleInput = (e: Event) => {
  const inputElement = e.target as HTMLInputElement;
  // 过滤所有非数字字符
  const inputNum = inputElement.value.replace(/\D/g, '');
  if (inputNum) {
    const num = parseInt(inputNum, 10);
    minutes.value = Math.max(1, num); // 确保最小值为1
  }
};

关键逻辑说明 #

• 格式化显示：通过computed属性根据minutes的数值动态生成带单位的文本，≤60时显示Xm，>60时拆分小时和分钟显示Xh Ym
• 输入处理：将输入框改为text类型，通过@input事件过滤非数字字符，提取有效数字后更新minutes，同时确保数值不小于1
• 按钮交互：直接修改响应式的minutes变量，使用Math.max保证数值不会低于最小值1

内容的提问来源于stack exchange，提问作者Ruben