할머니의 콤퓨타 도전기

[Vue.js] v-if 와 v-show 본문

Web Front-end/Vue.js

[Vue.js] v-if 와 v-show

ji.o.n.e 2020. 10. 28. 11:20
  • v-if
    • 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기때문에 "진짜" 조건부 렌더링 됨
    • 렌더링에서 조건이 거짓인 경우 조건 블록이 처음으로 참이 될 때 까지 렌더링 되지 않음
  • v-show
    • CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링 됨
  • v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 높다
  • 따라서 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장
  • kr.vuejs.org/v2/guide/conditional.html
 

조건부 렌더링 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

  • 코드 구현 (v-if)
    • 여러개의 div 태그 한번에 조건문에 넣고 싶을 시 template 태그 사용
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <template v-if="number == 1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </template>
        <div v-else-if="number == 2">hi</div>
        <div v-else>bye</div><br>
        <button @click="increase">increase</button> {{number}}

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                number: 1,
                show: false
            },
            methods: {
                increase(){
                    ++this.number;
                }
            },
        })
    </script>
</body>

</html>

 

  • 실행 화면

number가 1일 때, 1 2 3 표시
number가 2일 때 hi 표시

  • 코드 구현 (v-show)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <template v-if="number == 1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </template>
        <div v-else-if="number == 2">hi</div>
        <div v-else>bye</div><br> -->
        <div v-show="show">Hi</div><br>
        <button @click="toggle">Toggle</button>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                number: 1,
                show: false
            },
            methods: {
                // increase(){
                //     ++this.number;
                // }
                toggle(){
                    this.show = !this.show;
                }
            },
        })
    </script>
</body>

</html>

 

  • 실행 화면

toggle 버튼이 클릭 될 때 마다 Hi가 show 여부가 바뀜

 

저작자표시

'Web Front-end > Vue.js' 카테고리의 다른 글

[Vue.js] 여러개의 Vue 인스턴스 사용하기  (0) 2020.10.28
[Vue.js] v-for 리스트 렌더링  (0) 2020.10.28
[Vue.js] Watch 속성  (0) 2020.10.28
[Vue.js] Computed 속성  (0) 2020.10.28
[Vue.js] 데이터 양방향 바인딩 (Data Two Way Binding - v-model)  (0) 2020.10.28
'Web Front-end/Vue.js' Related Articles more
Comments