for문2

 

for문

 

// HTML
<template>
	
  <label>氏名</label>
  <input type="text" v-model="name">
  <br>
  <label>年齢</label>
  <input type="number" v-model="age">

  <ul>
    <li v-for="(item, i) in itemList">
      {{ item.name }} : {{ item.age }}
    </li>
  </ul>

  <button @click="add">add</button>

</template>

// Javascript
<script setup>
	
  import { ref } from 'vue';

  const name = ref();
  const age = ref();

  const itemList = ref([
    { name: 'test1', age: 100 },
    { name: 'test2', age: 200 },
    { name: 'test3', age: 300 }
  ]);

  function add() {
    itemList.value.push({ name: name.value, age: age.value });
    name.value = '';
    age.value = '';
  }
  
</script>

---