Vue 랜더링 문법 (v-for, v-if, v-show)

1. 리스트 랜더링 (v-for)

  - 형식 : v-for="(item, index) in items" 

  - items : 데이터 배열

  - v-for를 통해 배열을 하나씩 읽어와서 배열의 각 아이템을 item으로,

    배열의 현재 index를 index로 반환

<table>
    <thead>
        <tr>
            <td>이름</td>
            <td>제목</td>
        </tr>
    </thead>
    <tbody>
        <tr :key="index" v-for="(content, index) in contentList">
            <td>{{content.name}}</td>
            <td>{{content.title}}</td>
        </tr>
    </tbody>
</table>

<script>
    export default {
        data() {
            return {
                contentList: [
                    {"name":"홍길동1", "title":"테스트 글1"},
                    {"name":"홍길동2", "title":"테스트 글2"}
                ]
            };
        }
    }
</script>

 

2. 랜더링 문법(v-if)

  - v-if 디렉티브 표현식

<h1 v-if="boolValue">
    boolValue가 true 이면, h1 블록이 화면에 보임, 
    boolValue가 false 이면 h1 블록이 보이지 않음
</h1>

  - v-else 디렉티브 표현식

<h1 v-if="boolValue">boolValue가 true 이면, 현재 블록이 화면에 보임</h1>
<h1 v-else>boolValue가 true 가 아니면 현재 블록이 화면에 보임</h1>

  - v-else-if 디렉티브 표현식

<h1 v-if="TypeValue === 'A'">TypeValue가 'A' 이면, 현재 블록이 화면에 보임</h1>
<h1 v-else-if="TypeValue === 'B'">TypeValue가 'B' 이면, 현재 블록이 화면에 보임</h1>
<h1 v-else>TypeValue가 'A', 'B' 가 아니면, 현재 블록이 화면에 보임</h1>

 

3. 랜더링 문법(v-show)

  - v-show 디렉티브 표현식

<h1 v-show="boolValue">boolValue가 true 이면 현재 블록이 화면에 보임</h1>

 

4. v-if 와 v-show 차이점

v-if 와 v-show는 비슷해 보이지만 내부적으로 랜더링 하는 방식에 차이가 있습니다.

v-if는 조건이 만족할 경우 html 블록을 생성하고, 조건에 맞지 않으면 html 블록은 삭제 됩니다.

v-show는 조건 여부와 상관 없이 무조건 html 블록을 생성하고, 조건이 맞으면 css의 display를 이용하여 화면에 보여주고, 조건이 맞지 않으면 숨김 처리 합니다. (조건과 상관 없이 무조건 랜더링 됨)