使用Watcher重置空数字输入框为0后，输入新值时0无法消失的问题

解决方案：用计算属性分离视图显示与实际数据 #

核心思路是通过计算属性绑定输入框，让输入框的显示内容和实际存储的旋转角度数据解耦：当实际角度为0时，输入框显示空（避免输入新值时带前缀0）；当输入框为空时，实际角度设为0（保证圆形旋转角度正确）。

修改后的代码： #

HTML部分

<input type="number" v-model="inputDegree" />
<!-- 你的圆形元素，绑定旋转样式 -->
<div class="circle" :style="rotated"></div>

JS部分

export default {
  data() {
    return {
      degree: 0, // 实际存储的旋转角度，始终为数字类型
    };
  },
  computed: {
    // 专门用于输入框绑定的计算属性
    inputDegree: {
      get() {
        // 实际角度为0时，输入框显示空字符串
        return this.degree === 0 ? '' : String(this.degree);
      },
      set(val) {
        // 输入框为空时，将实际角度设为0；否则转为数字
        this.degree = val === '' ? 0 : Number(val);
      }
    },
    rotated() {
      return { transform: `rotate(${this.degree}deg)` };
    }
  },
  // 移除原有的watcher，计算属性的set已处理值更新逻辑
};

原方案问题原因 #

你之前通过watcher将空字符串设为0时，输入框绑定的degree值变为0，输入框会直接显示0。当用户开始输入新数字时，浏览器的数字输入框会把新内容追加到现有值后（比如输入3变成03），这就导致了前缀0无法自动消失的问题。

通过计算属性分离显示与实际数据后，输入框在角度为0时显示为空，用户输入新值时直接从空开始输入，不会有前缀0的困扰，同时实际的degree始终保持数字类型，保证旋转逻辑正常。

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