vue3中表单输入后打开有残留值，怎么清除

在 Vue 3 中，当你处理表单输入并且希望在打开页面或失去焦点时清除默认值或前一次输入的内容，可以采用以下几种方法：

1. **v-model 清空策略**:
- 使用 `v-model.lazy` 或者 `v-model.trim` 表达式，这样可以在获取到值后再清空，避免显示短暂的残留值。

   <input v-model.lazy="inputValue" />

2. **事件驱动**:
- 当用户离开表单元素（比如 `@blur` 事件），或者整个表单提交之前（比如 `@submit.prevent`），清除值。

   <input @blur="inputValue = ''" v-model="inputValue" />

3. **计算属性**:
- 创建一个计算属性，当输入发生变化时，自动清空。

   data() {
     return {
       inputValue: ''
     }
   },
   computed: {
     cleanedInput() {
       return this.inputValue === '' ? null : this.inputValue;
     }
   },
   methods: {
     handleBlur() {
       this.inputValue = '';
     }
   }

并绑定到模板上。

4. **模板选项 API**:
- 使用 `<input type="text" :value="inputValue | trim">`，利用管道 (filter) 清除输入值的前导/尾随空白字符。

以上方法取决于你的具体需求和场景选择，确保在用户体验和数据一致性之间找到平衡。