v-model常用修飾符

v-model常用修飾符

  lazy
  number
  trim

lazy

在默認情況下，v-model 在input事件中同步輸入框的值與數據。
在添加了lazy之後，會把 oninput 事件改成 onchange 事件。

<template>
  <div>
    <input type="text" v-model.lazy="lazy" @change="change" />
    {{lazy}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: "",
      lazy: "",
      trim: ""
    };
  },
  methods: {
    change() {
      console.log(this.lazy);
    }
  }
};
</script>

number

number 修飾符會把 v-model 的值轉換成數值類型。
注意:如果輸入的第一個字是字符串，那number這個修飾符就不會生效。
輸入的第一個只能是數字或者小數點或者是正負號。

<template>
  <div>
    <input type="text" v-model.number="num" @change="change" />
    {{num}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: "",
      lazy: "",
      trim: ""
    };
  },
  methods: {
    change() {
      console.log(this.num，typeOf this.num);
    }
  }
};
</script>

trim

trim的作用是過濾用戶輸入時首尾的空格字符。

<template>
  <div>
    <input type="text" v-model.trim="trim" @change="change" />
    {{trim}}{{trim}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: "",
      lazy: "",
      trim: ""
    };
  },
  methods: {
    change() {
      // console.log(this.num, typeof this.num);
    }
  }
};
</script>
```![在這裏插入圖片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy83Mjc1NTY5LTc2NDljY2IyZGQ2M2NlZjkuZ2lm)