조건부 렌더링

v-if


Vue에서는  v-if 디렉티브를 사용해 조건문을 작성
여느 다른 언어의 조건문과 같이  v-if , v-else-if, v-else 사용

template에 v-if를 갖는 조건부 그룹 만들기

 v-if 는 디렉티브이기 때문에 하나의 엘리먼트에 추가 해야함
여러개의 엘리먼트를 전환할 때는 보이지 않는 래퍼 역할을 하는 엘리먼트에  v-if 를 사용할 수 있고 렌더링 결과는 엘리먼트는 포함되지 않음

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

v-else

 v-else 디렉티브를 사용해  v-if 에 대한 “else 블록”을 나타낼 수 있음

<div v-if="Math.random() > 0.5">
    you can see me
</div>
<div v-else>
    you can't see me
<div>

v-else-if

 v-else-if  v-if 에 대한 “else if 블록” 역할, 여러 개 사용 가능

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else-if="type === 'C'">
    C
</div>
<div v-else>
    Not A/B/C
</div>

순서는 v-if > v-else-if > v-else

key를 이용한 재사용 가능한 엘리먼트 제어

Vue는 효율적으로 엘리먼트를 렌더링하려 시도하며, 종종 처음부터 렌더링을 하지 않고 다시 사용함.
아래 예는 사용자가 여로 로그인 유형을 전환할 수 있도록 허용하는 경우

<template v-if="loginType === 'username'">
    <label>사용자 이름</label>
    <input placeholder="이름을 입력하세요">
</template>
<template v-else>
    <label>이메일</label>
    <input placeholder="이메일 주소를 입력하세요">
</template>

위의 코드에서 로그인타입을 바꿔도 원래 작성한 내용은 유지되는데
이때  placeholder 속성 뒤에 key=”username-input”, key=”email-input” 을 각각 적어주면 로그인 유형 변경시 내용도 초기화가 된다

v-show


엘리먼트를 조건부로 표시하기 위한 또 다른 옵션은  v-show 디렉티브이다

<h1 v-show="ok">안녕</h1>

위와같이 사용하며  v-if 와의 차이점은  v-show 가 있는 엘리먼트는 항상 렌더링 되어 DOM에 남아있고, display CSS 속성을 토글해 나타내고 감춤

v-if vs v-show


 v-if 는 조건부 블럭 안의 내용에 따라 제거되고 만들어지고
 v-show 는 우선 렌더링이 되고 CSS 속성으로 감추고 보여줌
따라서  v-if 는 토글 할 때의 비용이 높고,  v-show 는 초기 렌더링 비용이 높으므로
자주 바뀐다면  v-show , 바뀌지 않는다면  v-if 를 권장함

v-if와 v-for


뒤에 나오겠지만  v-if 보다  v-for 이 높은 우선순위를 가지고 있음

자료 만들고 공유합니다

틀린부분 댓글로 지적 및 부족한 부분 피드백 부탁드립니다

https://slides.com/takeu/deck-2/live#/


루비 기초 문법

루비란 무엇인가

객체지향 간단한 설명

문법 설명(메소드, 배열과 해쉬, 배열 제어, 반복자, 데이터, 조건문)

실습

'개발 > RoR' 카테고리의 다른 글

[RoR]레일즈 템플릿 넣는법  (3) 2017.05.27
루비온레일즈(Ruby on Rails) 루비 기초 문법  (0) 2017.03.29

정보

http://www.venturesquare.net/ - 스타트업 전문 미디어 서비스 플랫폼, 각종 스타트업 관련정보, 기술 등을 얻을 수 있음

http://platum.kr/ - 세계의 스타트업 관련 기사, 정보

http://www.k-startup.go.kr/ - 스타트업 공고, 소식, 가이드 


모임, 채용

http://onoffmix.com/ - 세미나, 포럼, 해커톤등 각종 행사 정보 및 참가신청

http://dcamp.kr/ - 스타트업 관련 행사, 매칭, 이벤트

https://www.rocketpunch.com/ - 스타트업 전문 채용정보, 구인구직 사이트

https://www.wanted.co.kr/ - 스타트업 전문 채용정보, 구인구직 사이트

http://www.elancer.co.kr/ - 프리랜서 구인구직 사이트


지식

http://d2.naver.com/home  - 네이버 개발 블로그

http://www.bizclass.co.kr/ - 마케팅 교육 사이트


http://markinfo.co.kr/front/phtml/index.php - 상표 등록, 중복 검사

https://www.tailorbrands.com/ - 이름만으로 로고를 디자인해주는 사이트

https://tyle.io/ - 홍보용 포스터, 카드뉴스를 편하게 만들 수 있음/ 그나마 써본 카드제작 사이트중 자유도, 디자인이 가장 낫다고 생각함

https://www.wadiz.kr - 크라우드 펀딩

https://otrade.co/ - 크라우드 펀딩2

http://www.neoply.com/ - 스타트업 엑셀러레이터

http://www.primer.kr/ - 스타트업 엑셀러레이터2


나도 스타트업 하고싶당

'좋은글 > 개발' 카테고리의 다른 글

개발 좋은 글 모음  (3) 2017.07.02
자료구조 소트 쉽게 이해하기  (0) 2017.04.07
블로그 운영시 참고 사이트, 프로그램  (0) 2017.04.03
스타트업 관련 정보 사이트  (2) 2017.03.29
  1. BlogIcon 핸드폰 내구제 2017.10.10 17:36

    와 클라우드 펀딩 사이트 아
    제가 저거 이름이 생각안나서
    찾다가 겨우 이거 보고 찾았네요
    고맙습니다용

+ Recent posts