Vue 中 v-model 的修饰符

lazy 修饰符：将 v-model 改为失去焦点后更新数据。

number 修饰符：将 v-model 数据转为数字类型。

trim 修饰符：去除 v-model 数据中的首尾空格。

语法格式

// lazy 修饰符
<input v-model.lazy="数据">
// number 修饰符
<input v-model.number="数据">
// trim 修饰符
<input v-model.trim="数据">

• lazy 修饰符
  

  <template>
    <h3>lazy 修饰符</h3>
    <input type="tel" v-model.lazy="tel">
    <p>数据：{{ tel }}</p>
  </template>
   
  <script setup>
  import { ref } from "vue";
  let tel = ref('155');
  </script>

  注：v-model 默认是 input 事件，添加 lazy 修饰符后，就会变成 change 事件，只有失去焦点时才能同步数据。

• number修饰符
  

  <template>
    <h3>number 修饰符</h3>
    <input type="tel" v-model.number="tel">
    <p>数据：{{ tel }}</p>
  </template>
   
  <script setup>
  import { ref } from "vue";
  let tel = ref('155');
  </script>

  注：相当于给 v-model 添加了一个 parseFloat 方法，将用户输入的内容转为数字类型。

• trim修饰符
  

  <template>
    <h3>trim 修饰符</h3>
    <input type="tel" v-model.trim="tel">
    <p>数据：{{ tel }}</p>
  </template>
   
  <script setup>
  import { ref } from "vue";
  let tel = ref('15503931234');
  </script>

  注：只能去除首部和尾部的空格，不能去除内容中间的空格。