[Vue] 폼 입력 바인딩

ina·2023년 3월 15일
0

폼 입력 바인딩

기본 사용법

  • v-model 디렉티브를 사용하여 입력 폼 input과 textarea 엘리먼트를 양방향 데이터로 바인딩할 수 있다.
  • v-model은 내부적으로 서로 다른 속성과 서로 다른 이벤트를 전송한다.
    • text와 textarea 태그는 value 속성과 input 이벤트를 사용한다
    • 체크박스와 라디오버튼은 checked 속성과 change 이벤트를 사용한다
    • Select 태그는 value를 prop으로, change를 이벤트로 사용한다

  <body>
    <div id="app">
      <input type="text" 
             @input="bindMessage" 
             :value="message" />
      <div>{{ message }}</div>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'Hello!'
        },
        methods: {
          bindMessage(e) {
            this.message = event.target.value
          }
        }
      })
    </script>
  </body>
</html>

주의사항

  • v-model을 통해서 한글을 입력할 경우 하나의 글자가 완성되지 않으면 한박자 늦게 적용됨
  • 한글을 입력할 경우 @input , :value을 통해 양방향 바인딩을 적용한다

수식어

  • .lazy : v-model은 각 input 이벤트 후 입력과 데이터를 동기화한다. .lazy 수식어를 추가하여 change이벤트 이후에 동기화 할 수 있다.

  • .number : 사용자 입력이 자동으로 숫자로 형변환 된다. HTML 입력 요소의 값은 항상 문자열(String)을 반영하기 때문에 종종 유용하다.

  • .trim : 사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거한다.

profile
🐢 💨 💨

0개의 댓글