Vue 조건문, 반복문

<div id="money">
    돈 : <input type="text" v-model.lazy="amount"><br>
    <!-- 돈이 플러스면 lion.png 보이게 함-->
    <img v-if="amount > 0" src= "images/lion.png">
    <img v-else-if="amount == 0" :src="imgSrc">
    <img v-else src="images/apeach.png">
</div>

<script>
    new Vue({
        el : "#money",
        data : {
            amount: 0,
            imgSrc: "images/logo.png"
        }
    });
</script>

<div id="app">
    <dl>
        <dt>1. java script 리터럴 객체의 데이터값 반복해서 렌더링</dt>
        <dd>
            <!-- 반복문 자체 반환 데이터 순서 : 값 -> property명(변수명, 속성명, key명)-->
            <li v-for="(value, key, index) in alias">
                 - 속성명 :  , 값 : 
            </li>
        </dd>
        <hr>
        <dd>
            <!-- 배열 구조에서는 값, index-->
            <li v-for="(value, index) in coffees">
                . 
            </li>
        </dd>
        <hr>
        <dd>
            <li v-for="(value, index) in emp">
                .
                <span v-for="(data, key) in value">
                     : 
                </span>
            </li>
        </dd>
        <hr>
        <dd>
            <li v-for="value in coffees" v-if="(value=='라떼')">
                <b></b>
            </li>
            <li v-else></li>
        </dd>

        <hr>
        <dd>
        <template v-for="(value, key) in favorite">
            <li>좋아하는 취미 : </li>
            <hr v-if="key%3==0">
        </template>
        </dd>
    </dl>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let model = {
        favorite: ["공부", "영화보기", "빈둥거리기", "몽상하기"], //배열 객체
        coffees: ["아메리카노", "라떼", "돌체라떼", "모카"],
        alias: { // 객체
            name: "유재석",
            nickName: "예능인"
        },
        emp: [
            { "firstName": "John", "lastName": "Doe" },
            { "firstName": "Anna", "lastName": "Smith" },
            { "firstName": "Peter", "lastName": "Jones" }
        ]
    }

    let vm = new Vue({
        el: "#app",
        data: model
    })
</script>