vue3 v-model.trim

在 Vue 3 中，v-model.trim 指令仍然用于对双向绑定的数据进行修饰，使其在更新时自动去除首尾空格。这个指令可以应用于 input、textarea 和其他支持输入的元素上。

以下是一个示例，展示了如何在 Vue 3 中使用 v-model.trim：

<template>
  <div>
    <input v-model.trim="message" type="text">
    <p>Trimmed message: {{ trimmedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      trimmedMessage: ''
    };
  },
  watch: {
    message(newValue) {
      this.trimmedMessage = newValue.trim();
    }
  }
};
</script>

在上面的示例中，我们在 input 元素上使用了 v-model.trim 指令来实现双向绑定，并将输入的值存储在 `message` 数据属性中。然后，通过使用 `watch` 监听 `message` 的变化，我们可以将去除首尾空格后的值存储在 `trimmedMessage` 属性中，并在页面上显示出来。

这样，无论用户输入时是否有首尾空格，都会自动去除，并且更新到 `trimmedMessage` 属性中。