Vue_v-for, template태그

 

 

v-for="값 in 값들" [v-bind]:key="유일값"
{{값}}
return {값들 : [] }


<!-- v-for="(값1, 값2) in 값1들" [v-bind]:key="유일값" -->
<!-- 값1, 값2 -->
return {값들 : [] }

<template>

    <div>

        <ul>

            <!-- v-for="값 in 값들" [v-bind]:key="유일값" -->

            <li v-for="name in names" :key="name">

                {{ name }}  <!-- 값 -->

            </li>

        </ul>

        <ul>

            <!-- v-for="(값1, 값2) in 값1들" [v-bind]:key="유일값" -->

            <li v-for="(name, idx) in names" :key="idx">

                {{idx+1}} {{ name }} <!-- 값1, 값2 -->

            </li>

        </ul>

    </div>

  </template>

 

  <script>

  export default {

      data: function(){

          return {

              names : ['홍길동', '이순신', '유관순']    //값들

          }

      }

  }

  </script>

 

  <style>

 

  </style>

 

 

 

 

 

images-App.vue

 

<template>

  <div>

    <HelloWorld v-bind:bookList="list"/>

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

export default {

    components:{

        HelloWorld

    },

    data: function(){

          return {

              list : [

                {id:"p01", name:"위험한 식탁", price:2000, data:"20170401", img:"a"},

                {id:"p02", name:"공부의 비결", price:3000, data:"20170402", img:"b"},

                {id:"p03", name:"오메르타", price:4000, data:"20170403", img:"c"},

                {id:"p04", name:"행복한 여행", price:5000, date:"20170404", img:"d"},

                {id:"p05", name:"해커스 토익", price:6000, date:"20170405", img:"e"},

                {id:"p06", name:"도로 안내서", price:7000, date:"20170406", img:"f"},

                ]

          }

      }

}

</script>

<style>

</style>

 

images-HelloWorld.vue

<template>

    <div>

       

        <ul>

            <li v-for="book in bookList" v-bind:key="book.id">

                <!-- require:   파일이나 모듈을 동적으로 넣을 때 필요 -->

                <img v-bind:src="require(`@/assets/images/${book.img}.jpg`)" width="100" height="200">

                {{ book.name }}

            </li>

        </ul>

    </div>

  </template>

 

  <script>

  export default {

    props:{

        bookList: Array

    }

  }

  </script>

 

  <style>

 

  </style>

 

 

 

 

 

<template>

    <div>

        <ul>

            <li v-for="(value, key) in person" v-bind:key="key">

                {{ key }} : {{ value }}

            </li>

        </ul>

        <ul>

            <li v-for="(value, key, idx) in person" v-bind:key="idx">

                {{idx}} {{ key }} : {{ value }}

            </li>

        </ul>

        <table>

            <tr v-for="(value, key, idx) in person" v-bind:key="idx">

            <td>

                {{idx}} {{ key }} : {{ value }}

            </td>

        </tr>

           

        </table>

       

    </div>

  </template>

 

  <script>

  export default {

    data:function(){

        return {

            person: {

                name: "홍길동",

                age: 10,

                address: "서울"

            }

        }

    }

  }

  </script>

 

  <style>

 

  </style>

 

template태그로 그룹핑(태그가 흔적으로 남지 않음 - 랜더링 되지 않음)

<template>

    <div>

        <h1>div태그 그룹핑: div태그가 흔적으로 남음</h1>

        <div v-for="(name, idx) in names" v-bind:key="idx">

               {{ idx+1 }} {{ name }}

        </div>

        <hr>

        <h1>template태그로 그룹핑: template태그가 흔적으로 남지 않음</h1>

        <template v-for="(name, idx) in names" >

            <span v-bind:key="idx">

                {{ idx+1 }} {{ name }} <br>

            </span>

        </template>

       

    </div>

  </template>

 

  <script>

  export default {

    data:function(){

        return {

            names:["홍길동", "이순신", "유관순"]

        }

    }

  }

  </script>

 

  <style>

 

  </style>