Vue：表单修饰符（.lazy/.number/.trim）

一、v-model.lazy

默认情况下，v-model 会在每次 input 事件后更新数据。也就是说在每次输入时都会改变绑定的值。

例如，在下面的代码中，每次在输入框中输入时，number都会立即改变

   {{ number }}
   <input type="text" v-model="number" />

有时候我们希望在一次输入结束后再更新数据，比如在搜索框中我们希望完整的输入后再检索，就可以使用.lazy。

例如，在下面的代码中，只有当结束这次输入时（例如失去焦点），number才会改变

{{ number }}
<input type="text" v-model.lazy="number" />

二、v-model.number

v-model.number可以将输入的值自动更改为数字。

例如，在下面的代码中，我们输入数字6，但它的类型是一个字符串

<template>
  <div class="page">
    {{ number }}
    <input type="text" v-model="number" :on-change="say()" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const number = ref();
const say = () => {
  console.log(typeof number.value);//string
};
</script>

加入.number后，输入数字会自动转化为number。

例如，在下面的代码中，我们输入数字6，它的类型是数字。

<template>
  <div class="page">
    {{ number }}
    <input type="text" v-model.number="number" :on-change="say()" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const number = ref();
const say = () => {
  console.log(typeof number.value);//number
};
</script>

需要注意的是，在使用.number修饰符时，如果我们先输入数字再输入其它字符或者先输入其它字符再输入数字，类型会是先输入的值的类型。

例如输入123aaa，类型为数字，值为123。

例如输入aaa123，类型为字符串，值为aaa123。

三、v-model.trim

它可以默认自动去除用户输入内容中两端的空格

当输入“            123456”

没有使用.trim时：

<template>
  <div class="page">
    {{ number }}
    <input type="text" v-model="number" :on-change="say()" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const number = ref();
const say = () => {
  console.log(typeof number.value); //string
  console.log(number.value); //            123456
};
</script>

使用.trim时：

<template>
  <div class="page">
    {{ number }}
    <input type="text" v-model.trim="number" :on-change="say()" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const number = ref();
const say = () => {
  console.log(typeof number.value); //string
  console.log(number.value); //123456
};
</script>

如果需要去除中间的空格，可以在输入的时候进行修改，如下所示

<template>
  <div class="page">
    {{ number }}
    <input type="text" @input="onInputChange" />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const number = ref("");
const onInputChange = (event: Event) => {
  const input = event.target as HTMLInputElement;
  let value = input.value;
  // 去除中间的空格
  number.value = value.replace(/[\s]+/g, "");
  // 更新原始数据时去除两端空格
  number.value = number.value.trim();
  console.log(number.value);
};
</script>