Vue 中 v-model 的修饰符

小吴吴吴呀2023-12-13 9:36

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

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

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

语法格式：

html 复制代码

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

lazy 修饰符

javascript 复制代码

<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 修饰符

html 复制代码

<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 修饰符：

javascript 复制代码

<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>

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

原创作者：吴小糖

创作时间：2023.12.13