Vue 시작하기 ③

 

어제의 포스팅에 이은 Vue.js의 class, 그리고 반복문 v-for에 대해 정리하겠다

 

 

 

 

Vue 프레임워크를 이용해서 class를 동적으로 쉽게 만드는 방법이 존재한다.

위의 코드는 버튼 7이라는 이름의 버튼을 갖고 있으며, 따로 부트스트랩 요소를 추가해주지 않는 상태이다.

 

바로 옆의 input창의 value값을 모델로 지정해놨으며,

만약 무언가를 작성하고 옆의 add 클릭 이벤트가 등록되어있는 추가 버튼을 클릭하면 부트스트랩 요소가 적용된다

(밑의 예시에서 보여주겠지만, btn과 btn-primary라는 부트스트랩 요소를 이용했다)

 

여기서 우리가 데이터로 받는 건

arr과 inputClass이며, 디폴트 값으로 arr의 경우 입력되는 대로 값을 하나씩 받을 예정이라 빈 배열 [ ]로 지정해놨다.

 

그리고 add라는 함수가 호출되면

arr 배열에 (즉, 클래스명이 들어와야 하는 자리) push 함수를 이용해서 입력받아지는 inputClass 값을 넣어준다.

 

 

 

 

 

여기서 버튼 7은 아무런 클래스 없이 꾸며지지 않는 상태이다.

옆을 보면 button class 만 덩그러니 있다.

 

 

 

 

그리고 여기서 부트스트랩의 파란색 버튼 효과를 주는 btn과 btn-primary를 입력 후 추가 버튼을 눌렀더니

옆의 콘솔 창에 button의 class로 btn, btn-primary가 동적으로 생성된 것을 볼 수 있다

 

 

 

 

 

요소를 브라우저에 나타내거나 나타내지 않게 하고 싶을 때는 v-if와 v-show를 사용할 수 있다.

 

위의 코드로 여섯 개의 박스 div를 생성하였다.

box1은 v-if="true"를 주어 요소가 true인 상태를 가정, 반대로 box2에는 false를 주었다.

 

box3은 isMake 체크박스가 체크되어있으면 true, 아니면 false로 변한다.

 

box5와 6은 v-if 대신 v-show 디렉티브를 주었다

 

밑의 결과를 통해 v-if와 v-show의 차이점을 알아보자

 

 

 

 

 

v-if="false" 디렉티브가 있던 box2는 브라우저에 표시되지 않았으며,

옆의 콘솔 창을 확인해보면 html 문서 자체에도 생성되지 않았다. ( <!-- -->로 주석처리되어있음)

 

v-show="false" 디렉티브가 있던 box5를 보면 브라우저 화면에는 보이지 않지만, 콘솔 창을 보니

display: none;이라는 속성이 적용되어있다 (html 문서에 생성되어있음)

 

두 디렉티브 모두 불리언으로 조작이 가능하며

앞에서 설명한 것과 같이 차이점이 존재한다

 

 

 

 

 

Vue를 이용하여 반복문을 출력하고 싶다면 v-for 디렉티브를 이용하면 된다. 

 

 

<li v-for="출력할 아이템 in 아이템이 들어있는 그룹명">{{아이템}}<li>

여기에 그룹명은 직접 배열을 넣어주어도 되고, data의 요소를 가져와서 넣어줄 수 있다.

 

목록 출력 3번 코드를 보면, 아이템뿐 아닌 인덱스도 함께 출력이 가능하다

 

 

 

 

 

v-for을 통한 목록 출력 3번까지의 결과이다.

 

3번의 경우, 인덱스를 함께 출력해줘서 10,20,30이라는 아이템 앞에 0,1,2번의 인덱스가

함께 표시되었다.

 

 

 

목록 출력 4번은 members라는 멤버의 이름과 주소가 들어있는 오브젝트이며

각 오브젝트를 배열에 담았다 [ {오브젝트 1}, {오브젝트 2}.. ]

 

브라우저 화면에 출력할 때는 

{{members.name}} 과 {{members.addr}}로 오브젝트 안의 value가 key에 맞게 따로 출력되도록 만들었다.

 

 

 

 

 

이번 반복문 활용은 input 텍스트 박스에 텍스트 입력 후 추가 버튼을 클릭하면

입력했던 텍스트가 리스트 아이템으로 출력되는 것이다.

 

v-for문과 push를 사용하면 가능하다.

 

우선 우리에게 필요한 데이터인 inputMsg와 msg를 data에 작성한다. (기본값을 함께 작성해야 함)

여기서 msg는 출력될 아이템들이 모여있는 공간이므로 v-for문을 통해 요소를 하나씩 리스트로 넘기려면

배열 []의 형태로 되어있어야 한다. 그래서 기본값으로 빈 배열을 지정해줬다.

 

그리고 추가 버튼을 클릭하면 clicked() 함수가 호출되며,

로직의 순서가 clicked 함수로 들어간다.

여기서 inputMsg에 작성되는 텍스트를 받은 후 msgs 배열에 넣기 위해 push 함수를 이용한다.

 

 

 

 

처음 브라우저에 보이는 화면이다

옆의 콘솔 창을 보면 리스트에 리스트 아이템이 따로 들어있지 않다.

 

 

 

 

여기서 텍스트 박스에 텍스트를 입력 후 추가 버튼을 누르면

입력했던 텍스트가 리스트의 리스트 아이템으로 출력된 것을 확인할 수 있다

 

 

 

 

옆의 콘솔 창을 확인해보니 ul의 li로 두 개의 텍스트 모두 잘 들어와 있다