Taran

Vue.js 개인 프로젝트 진행 중, 이전에 v-bind의 true-value, false-value 속성을 사용한 분기만 있는 것이 별로 도움이 되지 않아 다른 방법을 작성한다. 

이전 작성글 (v-bind 바인딩)

https://chainbell.tistory.com/entry/Vuejs-6-v-model%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%9C-%EC%9E%85%EB%A0%A5-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94%A9?category=784113

* 작성 코드가 이전 글과 다르게 vue 파일로 되어있다. 

1. 목표 

기능 구현 목표는 [로그인 페이지에서 아이디/비밀번호가 미기재 상태일 때, 입력을 유도하기 위한 표시]를 하는 것이다. 

새로운 글자를 출력할 필요 없이, input type text의 테두리에 빨간 테두리를 표시만 해줄 것이다. 

2. 템플릿 

input_box와 input_box_invalid는 vue 파일 하단에 기재된 css class 명이다. 

3. Vue instance 

아이디/패스워드 각 입력칸이 별도로 움직일 것이기 때문에, 그를 위한 변수를 하나씩 생성해준다. 

class_id_input_box는 아이디, class_pw_input_box는 비밀번호에 적용시킬 것이다. 

위 함수는 로그인 버튼 클릭 시 호출되는 함수이다. (로그인 버튼 관련 내용은 언급하지는 않았다.)

간단하게 각 입력값이 빈 문자열이라면, 각 data 인자를 false로 바꿔 템플릿에서 다른 css가 적용된 class를 받아가도록 되어있다. 

4. 결과

미입력 후 로그인 실행 시, 이렇게 빨간색으로 테두리가 생긴다.