[Vue] 폼 입력 바인딩 - 수식어 (lazy, number, trim)

⚠️ 이 포스팅은 Vue3(한국어): 폼 입력 바인딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

---

 

1. lazy

v-model에 수식어 lazy를 붙여주면 폼 입력 요소가 포커싱되지 않는 상황에 값이 업데이트된다.

<template>
  <h1>{{ msg }}</h1>
  <input type="text" v-model.lazy="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
    };
  },
};
</script>

 

@change

@change는 v-model에 수식어 lazy와 같이 input 요소가 포커싱되지 않는 상황에 값이 업데이트된다.

<template>
  <h1>{{ msg }}</h1>
  <input type="text" :value="msg" @change="msg = $event.target.value" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
    };
  },
};
</script>

 

2. number

v-model에 수식어 number를 붙여주면 폼 입력 요소에서 받아온 값이 자동으로 숫자로 바뀐다. input 요소에서 숫자를 입력해도 받아온 데이터는 문자형 데이터로 전환된다. 이때 v-model의 수식어인 number를 사용하면 받아온 데이터는 항상 숫자로 변환된다.

<template>
  <h1>{{ msg }}</h1>
  <input type="text" v-model.number="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 123,
    };
  },
  watch: {
    msg() {
      console.log(typeof this.msg);
    },
  },
};
</script>

<style scoped></style>

 

3. trim

v-model에 수식어 trim을 붙여주면 입력한 데이터 앞뒤에 있는 공백을 제거해준다.

<template>
  <h1>{{ msg }}</h1>
  <input type="text" v-model.trim="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World',
    };
  },
  watch: {
    msg() {
      console.log(this.msg);
    },
  },
};
</script>