for문3

 

for문

 

// HTML
<template>
	
  <input type="number" v-model="age" @input="check">
  <label>歳以上</label>

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

  <p v-if="count > 0">対象ユーザー数は{{ count }}人です</p>
  <p v-else>対象ユーザーがいません</p>

</template>

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

  const age = ref();
  const count = ref(0);

  const itemList = ref([
    { name: '太郎', age: 20 },
    { name: '花子', age: 25 },
    { name: '次郎', age: 30 },
    { name: '三郎', age: 35 }
  ]);

  function check() {
    count.value = 0;
    if (age.value > 0) {
      for (const item of itemList.value) {
        if (age.value <= item.age) {
          count.value++;
        }
      }
    }
  }
  
</script>

---