Vuejs로 todo list 만들기

요약

 

Vue.js를 사용하여 할 일 목록을 만들어 보았습니다. HTML, CSS, JavaScript를 사용하여 할 일을 추가하고 삭제할 수 있는 메소드를 작성하였습니다.

---

Vue.js를 사용한 할 일 목록 코드

HTML

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">새로운 할 일을 입력하세요:</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="할 일을 입력하세요"
    >
    <button>추가</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

CSS

#todo-list-example {
  width: 400px;
  margin: 0 auto;
  font-family: sans-serif;
  text-align: center;
}

JavaScript

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: '운동하기'
      },
      {
        id: 2,
        title: '책 읽기'
      },
      {
        id: 3,
        title: '요리하기'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

결과

Vue.js를 사용하여 할 일 목록 코드를 작성하였습니다. HTML, CSS, JavaScript를 사용하여 할 일 목록을 만들었습니다. HTML에는 새로운 할 일을 입력하는 폼과 할 일 목록을 보여주는 요소가 포함되어 있습니다. CSS는 할 일 목록의 가로 길이를 설정하는 스타일이 작성되어 있습니다. JavaScript에는 새로운 할 일을 추가하고 할 일을 삭제하는 메소드가 작성되어 있습니다.