Vue.js에서 쉽게 문자 수 카운터 구현

Vue.js에서 문자 수 카운터 구현





배경


  • 텍스트 (문자 수) 카운터를 구현해야했습니다.
  • 공수는 많이 걸리지 않는다
  • Vue.js의 내장은 임의로 넣어 좋은 조건

  • 구현



    Vue.js 버전


  • Vue는 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>를 사용했습니다

  • 양식 설정


  • 폼은 <input v-model.trim="message" maxlength="20"><textarea v-model.trim="message" maxlength="50"></textarea> 의 2점
  • 최대 문자수는 브라우저의 제어로 갖게 하기 위해(때문에) maxlength 로 제어했습니다
  • trim 를 사용하면 시작과 끝의 공백이 입력 시점에 잘립니다. 서두에 반각 스페이스 등이 들어가도 카운트 밖이 됩니다.
  • <p>{{ message.length }}/20</p>에서 적시에 입력 문자 수가 표시됩니다.
  • 폼의 사용성으로는 placeholder="50文字以内で入力してください" 등 넣어 두면 좋을 것입니다.
  • placeholder의 문자는 입력시에 사라집니다



  • js


  • js 측은 data 속성으로 message new Vue({ el: "#app", data: { message: "" }}); 뿐입니다.
  • data 객체의 message의 값은 칼라로 둡니다.
  • 서두문이 정해져 있는 경우 등, data: { message: "例文:" } 등 미리 문언을 넣어 둘 수도 있습니다.
  • * placeholder와 함께 사용하면 위의 Vue가 이길 것이며 placeholder가 작동하지 않습니다


  • 결과



    See the Pen Vue.js Text Counter by Asagiri ( @agdg ) on CodePen .

    주의점



    • 줄 바꿈은 계산되지 않지만 공백이나 탭은 계산되는 것 같습니다
    • ↑ 여기 Vue.js만으로 해소되는 방법이 있으면 가르쳐주세요


    참조




    좋은 웹페이지 즐겨찾기