[Vue] 리스트 렌더링

<template>
  <div>
    <div>
      {{ fruits }}
    </div>

    <div>
      <ul>
        <li v-for="(fruit, index) of fruits" :key="index">
          {{ index * index * index }} {{ fruit }}
        </li>
      </ul>

      <h2 v-for="(value, key, index) in user" :key="key">
        {{ index }}, {{ key }} : {{ value }}
      </h2>

      <p v-for="n in 5" :key="n">{{ n }}</p>

      <!-- 중첩반복문 -->
      <div v-for="(animal, animalIndex) in animals" :key="animalIndex">
        <h2>Animal ===> {{ animal.name }}</h2>
        <h3>food</h3>
        <ul>
          <li v-for="(food, foodIndex) in animal.food" :key="foodIndex">
            {{ animal.name }} has {{ foodIndex }} : {{ food }}
          </li>
        </ul>
      </div>

      <div v-for="i in 9" :key="i">
        <div v-for="j in 9" :key="j">i:{{ i }}, j:{{ j }} = > {{ i * j }}</div>
        <div>---</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      // list
      fruits: ["banana", "strawberry", "apple", "melon"],

      //object
      user: {
        name: "scalper",
        age: 100,
        job: "programmer",
      },

      //object list
      animals: [
        { name: "monkey", size: "medium", food: ["banana", "apple"] },
        { name: "lion", size: "big", food: ["deer", "cow"] },
        { name: "rat", size: "small", food: ["cheese", "rice"] },
      ],
    };
  },
};
</script>

<style></style>