vue.js 조건부 렌더링 v-if
조건부 렌더링
v-if
Handlebars와 같은 문자열 템플릿에서는 다음과 같은 조건부 블록을 작성할 수 있습니다.
HTML부분
<!-- Handlebars 템플릿 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
Vue에서는 v-if 디렉티브를 사용하여 같은 결과를 얻을 수 있습니다.
HTML 부분
<h1 v-if="ok">Yes</h1>
v-else와 함께 "else 블록"을 추가하는 것도 가능합니다.
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
JS부분
data:{
ok: true
}
게시판 목록
퍼블리셔팁
퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 947 | CSS | 8년 전 | 1558 | ||
| 946 | CSS | 8년 전 | 2224 | ||
| 945 | CSS | 8년 전 | 1738 | ||
| 944 | CSS | 8년 전 | 2163 | ||
| 943 | CSS | 8년 전 | 2231 | ||
| 942 | CSS | 8년 전 | 2199 | ||
| 941 | CSS | 8년 전 | 2018 | ||
| 940 | CSS | 8년 전 | 1757 | ||
| 939 | CSS | 8년 전 | 2263 | ||
| 938 | CSS | 8년 전 | 1583 | ||
| 937 | CSS | 8년 전 | 1661 | ||
| 936 | CSS | 8년 전 | 1775 | ||
| 935 | CSS | 8년 전 | 2376 | ||
| 934 | CSS | 8년 전 | 2462 | ||
| 933 | CSS | 8년 전 | 1812 | ||
| 932 | CSS | 8년 전 | 2275 | ||
| 931 | CSS | 8년 전 | 1855 | ||
| 930 | CSS | 8년 전 | 1881 | ||
| 929 | CSS | 8년 전 | 1812 | ||
| 928 | CSS | 8년 전 | 1513 | ||
| 927 | CSS | 8년 전 | 1553 | ||
| 926 | CSS | 8년 전 | 3125 | ||
| 925 | CSS | 8년 전 | 2092 | ||
| 924 | CSS | 8년 전 | 1713 | ||
| 923 | CSS | 8년 전 | 2128 | ||
| 922 | CSS | 8년 전 | 2156 | ||
| 921 | CSS | 8년 전 | 2340 | ||
| 920 | CSS | 8년 전 | 1665 | ||
| 919 | CSS | 8년 전 | 2505 | ||
| 918 | CSS | 8년 전 | 1815 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기