본문 바로가기
728x90
반응형

IT

[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.. 더보기
[백준 문제 10951번] A+B-4문제 (hasnext) 문제 10951) A+B-4 문제) 두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오. 입력) 입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 한 줄로 이루어져 있으며, 각 줄에 A와 B가 주어진다. (0 < A, B < 10) 출력) 각 테스트 케이스마다 A+B를 출력한다. 두 값을 넣으면 A+B가 출력이 되면 됩니다. NO 입력 출력 1 1 1 2 2 2 3 5 3 3 4 7 4 9 8 17 5 5 2 7 저는 이 문제를 풀지 못했습니다. 왜냐면 문제 자체를 제대로 이해하지 못했기 때문입니다. 그래서 입력 값을 배열로 받고 출력도 해보고 했지만 결국 실패만 했습니다. 그 이유는 제가 n 값을 지정해서 입출력 예시처럼 5개만 입력되도록 지정했기 떄문입니다... 더보기
[java script] Vue.js 유저 조작과 연동(v-on) 1. v-on : 이벤트와 메서드를 연결합니다. ▷ 메서드(명령문)은 Vue 인스턴스에 methods 옵션을 추가해서 만듭니다. new Vue({ el: "#ID명", data:{ 프로퍼티명1: 값1, 프로퍼티명2: 값2 }, methods:{ 메서드명: function(){ 처리내용 }, 메서드명: function(){ 처리내용 } } }) 'v-on:'을 생략하고 '@'를 사용해도 됩니다. ◎ 버튼을 클릭하면 1씩 증가하는 예제(v-on click) 클릭하면 1씩 증가하는 예제 {{ count }} 1씩증가 버튼을 클릭하면 숫자가 1씩 증가합니다. 이 챕터부터는 함수를 이용해서 숫자의 값을 증가하는 동작을 할 수 있도록 만듭니다! ◎ "좋아~" 버튼을 클릭하면 두 번째는 버튼을 누를 수 없는 버튼 생.. 더보기
[java script] Vue.js 속성(v-bind, a, class) 1. v-bind : 요소의 속성을 데이터로 지정합니다. ◎ image 속성 예제 이미지 속성을 지정하는 예제 직접지정 v-bind로 지정 v-bind 생략 이미지 변수를 만들어 v-bind:src="프로퍼티명"으로 지정할 수 있습니다. 또한, v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다. ◎ url 속성 예제 링크를 직접지정 링크를 v-bind로 지정 링크를 v-bind로 생략 지정 url 변수를 만들어 v-bind:href="프로퍼티명"으로 지정할 수 있습니다. 이미지와 동일하게 v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다. ◎ align 속성 예제 align 지정 예제 우측정렬 직접 지정 우측정렬을 v-bind로 지정 우측정렬을 v-bind 없이 지정 align 변수.. 더보기
[java] 자바의 정석 ch6 연습문제 풀이 6-1) 다음과 같은 멤버변수를 갖는 SutdaCard클래스를 정의하시오. 타입 변수명 설명 int num 카드의 숫자. (1~10 사이의 정수) boolean isKwang 광(光)이면 true, 아니면 false // 풀이: class SutdaCard{ int num; boolean isKwang; } 6-2) 문제 6-1에서 정의한 SutdaCard클래스에 두 개의 생성자와 info()를 추가해서 실행결과와 같은 결과를 얻도록 하시오. class Exercise06_02 { public static void main(String args[]) { SutdaCard card1 = new SutdaCard(3, false); SutdaCard card2 = new SutdaCard(); System... 더보기
[java] 자바의 정석 ch5 연습문제 풀이 5-1) 다음은 배열을 선언하거나 초기화한 것이다. 잘못된 것을 고르고 그 이유를 설명하시오. a. int[] arr[]; b. int[] arr = {1,2,3,}; c. int[] arr = new int[5]; d. int[] arr = new int[5]{1,2,3,4,5}; e. int arr[5]; f. int[] arr[] = new int[3][]; 풀이) d, e d : 두 번째 대괄호 안에 배열의 크기를 지정할 수 없습니다. 이미 괄호 안의 데이터 개수에 따라 방 개수가 정해졌기 때문입니다. e : 배열을 선언할 때는 배열의 크기를 지정할 수 없습니다. 5-2) 다음과 같은 배열이 있을 때, arr[3].length의 값은 얼마인가? int[][] arr = { {5, 5, 5, 5, .. 더보기
[java script] 구구단 출력하기 예시 ◎ 구구단 만들기 예제) 홀수단은 1행, 짝수단은 2행으로 출력되도록 하시오. 홀수 짝수 table과 id를 이용해 홀수와 짝수 칸을 나눠주고 홀수, 짝수 버튼을 누르면 아래와 같은 출력이 되도록 만듭니다. 문자열은 변수에 더해서 저장하면 변수에 계속해서 문자열이 저장되게 됩니다. ex) str += "" => str = str + → 이때, 자바스크립트 내부에서 id를 지정할 때면 작은따옴표로 지정하면 됩니다. 구구단이 계속해서 div로 구분되어 저장되고 지정한 변수에 짝수와 홀수를 구분해서 넣어줍니다. → 반복문 내부의 str은 계속 초기화 되기 때문에 반복해서 값들을 넣어줄 수 있습니다. document.getElementById("odd").innerHTML = oddstr; → odd라는 id에.. 더보기
728x90
반응형

티스토리툴바