[nuxt] input filters 이용하기

 

input에 v-model로 미리 선언해놓은 data 변수에 연결해준다.

 

template 내에서 input값을 출력할 때 {{ input | comma }}를 사용해서 출력될 때 comma함수를 거쳐 출력되게 해준다.

comma에서는 value를 받아 정규식을 이용해서 변환된 값을 return해준다.

<template>
  <div class="container">
      <div id="keyupEvent">
          <h4>filters 사용</h4>
          <p>숫자만 입력되게 + 3자리마다 콤마</p>
          <input type="text" v-model="input">
          <p>Value: {{input | comma}}</p>
      </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            input:'',
        }
    },
    filters:{
        comma(v){
            return String(v).replace(/[^0-9]/g,'').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    },
}
</script>