vue基础v-moder修饰符( number, trim, lazy )

v-moder修饰符

一. v-model修饰符语法法:

 v-model.修饰符="变量"

二.这里只列举v-model修饰符在表单中的作用

1. number修饰符: 把数据转换为数字类型并赋值给变量
2. trim修饰符: 去掉字符串首尾空格
3. lazy修饰符: 等表单失去焦点, 才把值赋予给Vue数据变量

三. 代码示例

<template>
  <div>
    <p>年龄: <input type="number" v-model.number="age" /></p>
    <p>用户名: <input type="text" v-model.trim="username" /></p>
    <p>搜索: <input type="text" v-model.lazy="search" /></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      username: "",
      search: "",
    };
  },
};
</script>

<style></style>