はじめに

Vue.jsに少し触れてみたので、その内容を「Vue.js入門」として、数回にわけて書いてきました。
今回の４回目（最終回）では「ToDoリスト」を作ってみました。
前の記事は以下を参照してください。

※ここではVue.jsの**2.x系（2.6.14）**を使用しています。3.x系では書き方が異なるので注意してください。

1. 作成するToDoリストの仕様

初期表示で以下の通り表示します。
①はToDoの入力欄で、②はToDoリストの表示欄です。

入力欄にToDoの名前を入力し（①）、「追加」ボタンをクリックします（②）。
すると、ToDoの入力欄がクリアされ（③）、ToDoリストに入力したToDoが追加されます（④）。

ToDoリストのチェックボックスをオンにすると、ToDoの名前の前に「完了」を表示します。

ToDoリストの「削除」ボタンをクリックすると（①）、ToDoリストの一覧から削除されます（②）。

2. ToDoリスト作成

2.1. jsの作成

js/main.js

var vm = new Vue({
  el: '#app',   // （１）
  data: {
    todos: [    // （２）
      {isDone: false, name: 'Task1'},
      {isDone: false, name: 'Task2'},
      {isDone: false, name: 'Task3'}
    ],
    input: ''   // （３）
  },
  methods: {
    addTodo: function(input) {    // （４）
      var todo = {                // （５）
        isDone: false,
        name: input
      };
      this.todos.push(todo)       // （６）
      this.input = '';            // （７）
    },
    deleteTodo: function(index) { // （８）
      this.todos.splice(index, 1) // （９）
    }
  }
});

（１）elの名称をappとして、HTMLの<div>と紐付けます。
（２）dataに変数todosを定義し、配列を保持します。todosはisDone（チェックボックスをチェックしているかどうかを保持する変数）とname（ToDoの名称を保持する変数）のセットの配列としています。HTMLのToDoリストと紐付けます。
（３）dataに変数inputを定義します。HTMLのToDoの入力欄と紐付けます。
（４）methodsにaddTodoを定義します。HTMLの追加ボタンをクリックしたときに呼び出されます。
（５）変数todoを定義し、isDoneは初期値falseを設定、nameにはinput（入力されたToDoの名称）を設定します。
（６）todos（ToDoリスト）に（５）のtodoを追加します。
（７）input（ToDoの名称の入力欄）に空文字を設定します。
（８）methodsにdeleteTodoを定義します。HTMLの削除ボタンをクリックしたときに呼び出されます。
（９）todos（ToDoリスト）から該当の行を削除します。

2.2. HTMLの作成

index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsでToDoリスト</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  </head>
  <body>
    <div id="app">      <!-- （１） -->
      <h1>ToDoリスト</h1>
      <span>ToDo：</span>
      <input type="text" v-model="input">   <!-- （２） -->
      <button type="button" v-on:click="addTodo(input)">追加</button> <!-- （３） -->
      <ul>
        <li v-for="(todo, index) in todos"> <!-- （４） -->
          <div>
            <input type="checkbox" v-model="todo.isDone">                       <!-- （５） -->
            <span class="done" v-show="todo.isDone">完了</span>                 <!-- （６） -->
            <span>{{ todo.name }}</span>                                        <!-- （７） -->
            <button type="button" v-on:click="deleteTodo(index)">削除</button>  <!-- （８） -->
          </div>
        </li>
      </ul>

    </div>
    <script src="js/main.js"></script>
  </body>
</html>

（１）id=appとして、Vueのインスタンスと紐付けます。
（２）v-model="input"として、input変数と紐付けます。
（３）v-on:click="addTodo(input)"で、押下時にaddTodoメソッドを呼び出すようにします。
（４）v-for="(todo, index) in todos"として、todos変数の件数分繰り返します。todoにtodosの1件分のデータを、indexに繰り返しのインデックスがセットされます。
（５）v-model="todo.isDone"で、isDone変数と紐付けます。
（６）v-show="todo.isDone"で、isDone変数がtrueの場合のみ表示させます。
（７）nameを表示させます。
（８）v-on:click="deleteTodo(index)"で、押下時にdeleteTodoメソッドを呼び出すようにします。

2.3. CSSの作成

今回は以下のCSSを定義しています。

css/main.css

ul,
li {
  margin: 0 0 6px 0;
  padding: 0;
  list-style: none;
}

ul {
  margin-top: 30px;
}

 li div {
  position: relative;
  max-width: 300px;
  width: 100%;
  padding-right: 0px;
  box-sizing: border-box;
  white-space: break-all;
}

li button {
  position: absolute;
   top: 0;
  right: 0;
}

.done {
  color: #F00;
}

参考

リンク