devlog_zz

vueStudy v-for 본문

Front End/Vue

vueStudy v-for

YJ_SW 2020. 3. 25. 09:55
728x90
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VueJS Tutorials</title>
        <link href="styles.css" rel="stylesheet" />
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>Looping through lists</h1>
            <ul>
                <li v-for="character in characters">{{ character }}</li>
            </ul>
            <ul>
                <li v-for="(ninja, index) in ninjas">{{ index }} . {{ ninja.name }} - {{ ninja.age }}</li>
            </ul>
            <!-- <div v-for="(ninja, index) in ninjas">
                <h3>{{ index }} . {{ ninja.name }}</h3>
                <p>Age - {{ ninja.age }}</p>
            </div> -->
            <template v-for="ninja in ninjas">
                <div v-for="(val, key) in ninja">
                    <p>{{key}} - {{ val }}</p>
                </div>
                <hr />
            </template>
        </div>
    </body>

    <script src="app.js"></script>
</html>

v-for

 

<div v-for 하면 여러 div가 생김 -> <template v-for로 해결

 

728x90

'Front End > Vue' 카테고리의 다른 글

vue study - props  (0) 2020.03.25
vue study - nesting component  (0) 2020.03.25
vue study - nested component  (0) 2020.03.25
vue Study - Refs  (0) 2020.03.25
vue Study - component  (0) 2020.03.25
'Front End/Vue' Related Articles more
Comments