vue.js v-if / v-show 활용 예시

<template>
    <div>
        <h1>Home {{ title1 }}</h1>
    </div>
    <input type="text" v-model="input1"> <!-- 양방향 입력 가능-->
    <button type="button" @click="getData">get</button> <!-- onclick 과 같은 효과 (vue.js)-->
    <button type="button" @click="setData">set</button> 

    <select class="from-control" v-model="regions" @change="changeData">
        <option :key="i" v-for="(d, i) in options" :value="d.v"> <!-- :key : 고유한 이름 / data : d, i : index-->
            <!-- : 콜론 사용 시 바로 데이터에 접근 가능-->
            {{ d.t }}
        </option>
    </select>

    <table v-if="tableShow"> <!-- v-if 조건이 참일 시 코드 랜더링 / 거짓일 경우 랜더링조차 하지 않음-->
        <!-- v-show="tableShow" 참거짓에 상관 없이 랜더링 함-->
        <tr :key="i" v-for="(d,i) in options">
            <td>{{ d.v }}</td> <!-- vlaue 값-->
            <td>{{ d.t }}</td> <!-- text 값-->
        </tr>
    </table>

</template>

<script>
    export default{
        data(){
            return{
            title1 : "제목1",
            title2 : "제목2",
            input1 : "input1",
            options : [
                {
                    v : "S", t: "Seoul"
                },
                {
                    v : "J", t: "Jeju"
                },
                {
                    v : "B", t: "Busan"
                }
            ],
            regions : "B",
            tableShow : false
            }
        },
        watch : { // 모니터링
            input1(){
                console.log(intpu1);
            }
        },
        method : { // 자바스크립트의 모든 함수는 이곳에 선언
            getDate(){
                alert(this.input1);
            },
            setDate(){
                this.input1 = "set";
            },
            changeData(){ // 셀렉트박스 변경 시 해당 값 알림
                alert(this.regions);
            }
        },
    }
</script>

1. v-if : false일 경우 랜더링 조차 하지 않음

2. v-show : 참거짓에 상관 없이 무조건 랜더링 함

3. 빈번하게 발생하는 코드는 v-show 주로 사용