Vue のリスト表示とは？

リスト表示を使うことで複数のデータを一覧表示できます。

リスト表示は、v-for ディレクティブを使用します。

使用例

タスク一覧

複数のタスクをリストを使って表示する例です。

リストの filter を使って、表示するタスクを絞り込むこともできます。

タスク一覧

Task 1

Task 2

Task 3

Rest : 3

ソースコードを見る

<template>
  <div v-for="task in tasks">
    <input type="checkbox" v-model="task.done" />
    <label>{{ task.name }}</label>
  </div>
  <div>
    <p>{{ isFinish ? "Finish!" : `Rest : ${rest}` }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const tasks = ref([
  { id: 1, name: "Task 1", done: false },
  { id: 2, name: "Task 2", done: false },
  { id: 3, name: "Task 3", done: false },
]);

const isFinish = computed(() => {
  return tasks.value.every((task) => task.done);
});

const rest = computed(() => {
  return tasks.value.filter((task) => !task.done).length;
});
</script>

<style scoped>
button {
  margin: 8px;
  padding: 4px 12px;
  font-size: 16px;
  background-color: var(--main-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

label {
  font-size: 16px;
  color: var(--main-color);
  padding: 8px;
}
</style>

まとめ

リスト表示を使うことで、複数のデータを一覧表示できます。

参考

• リストレンダリング — Vue.js