[vue/js] Vue 의 html에서 List를 Rendering 하기 v-for

Vue에서 List 를 렌더링 하기

해당 포스팅은 Vue 의 공식문서를 참조하여 작성하였습니다.

Vue 에서는 v-if와 같은 편리한 기능을 제공하는 디렉티브가 있습니다. 리스트를 렌더링할때 또한, v-for라는 디렉티브가 있습니다.

해당 디렉티브는 forEach 와 같은 문법으로 작성됩니다. 사용방법은 다음과 같습니다.

<ul>
  <li v-for="todo in todos" :key="todo.id">
    
  </li>
</ul>

해당 구문을 사용하여, 할일 목록 리스트를 만드는 예제를 구현합니다.

<script setup>
import { ref } from 'vue'

let id = 0;

const newTodo = ref('');
const todos = ref([
    { id: id++, text: "HTML 배우기" },
    { id: id++, text: "js 배우기" },
    { id: id++, text: "ts 배우기" },
]);

function addTodo() {
    todos.value.push({ id: id++, text: newTodo.value })
    newTodo.value = '';
}

function removeTodo(todo) {
    const newTodoArray = todos.value.filter(t => t.id !== todo.id);
    todos.value = newTodoArray;
}
</script>

<template>
    <div>
        <input type="text" v-model="newTodo">
        <button @click="addTodo">할 일 추가</button>
    </div>

    <ul>
        <li v-for="todo in todos" :key="todo.id">
            <span></span>

            <button @click="removeTodo(todo)">x</button>
        </li>
    </ul>
</template>

<style></style>