Muscardinus

List Rendering 본문

FrontEnd/Vue

List Rendering

Muscardinus 2021. 12. 29. 02:24
728x90

배열 혹은 객체 내의 속성을 보이고 싶을 때가 있다.

 

let vm = Vue.createApp({
    data() {
        return {
            birds: ['Pigeons', 'Eagles', 'Doves', 'Parrots'],
            people: [
                { name: 'John', age: 20 },
                { name: 'Rick', age: 18 },
                { name: 'Amy', age: 33 }
            ]
        }
    }
}).mount('#app');

 

<!DOCTYPE >
<html>
  <head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="(bird, index) in birds" :class="bird" :key="bird">
          {{ bird }} - {{ index }}
        </li>
      </ul>

      <hr />

      <ul>
        <li v-for="person in people">
          <div v-for="(value, key, index) in person">
            {{ key }}: {{ value }} - Index: {{ index }}
          </div>
        </li>
      </ul>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>
728x90

'FrontEnd > Vue' 카테고리의 다른 글

Virtual DOM  (0) 2022.01.01
Vue Life Cycle  (0) 2021.12.31
Conditional Rendering  (0) 2021.12.29
Style Binding  (0) 2021.12.29
Class Bind  (0) 2021.12.29
'FrontEnd/Vue' Related Articles more
Comments