v-if 썸네일형 리스트형 [java script] Vue.js 조건(v-if)과 반복(v-for) 3 이번에는 v-for과 v-if를 조합해서 사용해 보겠습니다. ◎ v-for과 v-if를 사용한 예제 짝수만 표시하는 예제 {{ item }} 조건에 맞는 결과만 출력됩니다.(2, 4, 6) v-for과 v-if는 한 줄에 나열해서 사용할 수 있습니다. 짝수만 표시하는 예제 {{ item }} 짝수만 표시 filter를 이용해서 2의 배수만 출력되도록 합니다. filter는 조건에 만족하는 것만 배열에 변경하는 것입니다. ◎ 숫자 배열 조작과 구구단 출력을 나타내는 예제 숫자 배열 조작과 구구단 출력 {{ item }} 변경 삭제 추가 정렬 구구단 보이기 {{ i }} x {{ j }} = {{ i*j }} 위와 같은 화면이 출력됩니다. 1. 변경을 누르면 값이 1 증가 2. 삭제를 누르면 해당열 삭제 3.. 더보기 [java script] Vue.js 조건(v-if)과 반복(v-for) 2 오늘은 배열을 for문을 통해 나열하는 것을 추가로 배워보겠습니다. 바로 예제로 들어가 볼게요! ◎ table을 통해 다중 배열을 출력하는 예제 버튼으로 리스트에 추가/삭제 예제 {{ a }} 맨 뒤에 추가 네번째에 추가 첫번째를 변경 두번째를 삭제 th(행), td(열)에 모두 for문을 사용하면서 table이 나타나도록 정렬합니다. 이때 방법은 ranking(배열)을 line(배열)에 저장하고 line(배열)을 다시 item에 저장하면서 분리가 되도록 합니다. 자바나, 자바스크립트에서 for문을 이용해서 배열을 출력하는 방법과 유사하고 HTML에 적용한다는 것만 다릅니다. line, item은 다른 글자로 바꿔도 상관없습니다. ◎ 배열 데이터의 추가와 삭제 ▷ 배열.push(추가데이터) ▷ 배열.sp.. 더보기 [java script] Vue.js 조건(v-if)과 반복(v-for) 1 1.v-if : 조건에 따른 표시 이전에 if문을 java와 java script에서 많이 다뤄 보았었습니다. Vue.js에서는 어떻게 사용하는지 예제로 바로 알아보죠! ◎ 체크박스가 true 일때 결과를 출력하는 예제) true일때만 표시하는 예제 표시 체크박스가 ON script의 메서드에 if대신 body 내부에 변수를 넘겨주면서 체크박스가 on이 되면 v-if문 안의 글자가 출력됩니다. 조건이 true라면 표시 의 방법으로 사용하시면 됩니다. ◎ if문을 이용해 두 수를 비교하는 예제) if문을 이용해 두 수를 비교하는 예제 첫 번째 수는 : 두 번째 수는 : 큰 수 : {{ num1 }} 작은 수 : {{ num2 }} 작은 수 : {{ num1 }} 큰 수 : {{ num2 }} 두 수는 같습.. 더보기 이전 1 다음
