본문 바로가기

All118

[Vue.js] 조건문, 반복문, 객체 데이터 추출 조건문 : v-if, v-else-if, v-else로 작성한다. v-if 조건에 해당하는 태그만 렌더링된다. app.html 값을 입력해 주세요. 1이상의 숫자를 입력해 주세요. 짝수입니다. 홀수입니다. app.js let app = new Vue({ el : '#oddneven', data : { number : '' } }) 결과화면 공백인경우, 0인경우, 짝수인경우를 분기하여 렌더링되도록 했다. 반복문 : v-for를 이용하여 배열의 각 원소들에 접근한다. app.html 짝수만 보기 홀수만 보기 {{oddneven}}만 보여용! app.js let app1 = new Vue({ el: '#app1', data: { oddneven : '짝수' , numbers : [1, 2, 3, 4, 5, 6.. 2020. 7. 22.
[Vue.js] Vue 인스턴스 생성. 데이터 입력과 출력 Vue 인스턴스 생성 : el : 태그이름, data : 화면에 보여질 데이터 - el : 뷰 인스턴스화 할 DOM 객체를 넣는다. - data : 연동할 데이터 객체를 넣는다. let model = { message: 'HELLO!' } //Vue 인스턴스 생성(뷰모델, 상태와 연산) let app = new Vue({ el: '#sample', data: model }); 데이터를 출력하는 세가지 방법 1. {{ }} : text를 그대로 출력한다. {{ message }} 2. v-text : 위의 {{ }}와 같다. 3. v-html : html을 파싱하여 출력한다. message에 html코드가 있을 시 파싱되어 출력된다. v-bind & v-model 1. v-bind : 단방향 바인딩. v-.. 2020. 7. 19.
Thymeleaf에서 Java의 method 사용하기(JSP custom tag와의 비교) Model1 ->Model2로 가는 과도기에서 Java소스를 화면단에서 관행처럼 가져다 붙였으나 사실 이런 화면상 처리는 js로 해주는 것이 맞다. 아래 예시는 간단하지만 기존 JSP에서 쓰던 복잡한 Java소스를 thymeleaf 엔진에서 부득이하게 가져다 써야 하는 경우가 생겨 알게된 사실을 정리해 본다. JSP에서는 자바 유틸클래스에서 만들어준 여러가지 method들을 사용하려면 따로 .tld 파일을 만들어 설정해준 후, JSP상단에 custom tag library를 선언해줬어야 했다. 비교를 해보면, 아래처럼 CustomUtil.java 클래스 안에 11자리의 전화번호를 받아 '-'문자로 번호를 나누어 전체 전화번호를 문자열로 반환하는 setPhoneNum메서드가 있다고 하자. CustomUti.. 2020. 7. 17.
한영순차통역 13주차 - 하이브리드 자동차 보호되어 있는 글 입니다. 2020. 6. 13.
한영순차통역 12주차 - 다문화주의 보호되어 있는 글 입니다. 2020. 6. 13.
한영순차통역 11주차 - IPO(Initial Public Offering)관련 CEO 연설문 보호되어 있는 글 입니다. 2020. 6. 12.

티스토리툴바