JavaScript
Vue.js

【Vue.js入門】v-bindでclassを操作してToDoアプリの完了状態を管理してみる


ToDoアプリの完了状態を管理できるようになる

今回のサンプルはこちらで確認できます。

完成形はこんな感じで、タスクを完了(チェック)すると文字が青くなり横線が入るようになります。

Screen Capture 46.mp4.gif


JavaScriptにデータに完了状態を加える

todoそれぞれにtitleと状態を表すisDoneを用意します。

data: {

newItem: '',
todos: [{
title: 'task1',
isDone: false
}, {
title: 'task2',
isDone: true
}, {
title: 'task3',
isDone: false
}]

上記のようにオブジェクトごとにすることによって、todoのタイトル状態を表現できるようになります。

今回はtask2だけをtrueとし、サンプルgif画像で言うチェックや横線が入っているタスクになります。

新規作成するtodoにデフォルトで状態をfolseになるように設定します。

let item = {

title: this.newItem,
isdone: false
};

以上の変更により、pushするのはitemに変更されます。

this.todos.push(item);

this.newItem = '';


HTML側で完了状態を表示できるようにする

今までは{{ todo }}だけで表示させてきましたが、dataが細分化されたため、タイトルを表示させるためには{{ todo.title }}とさせる必要があります。

今回はチェックボックスも表示します。

  <input type="checkbox" v-model="todo.isDone">

<!-- <span v-bind:class ="{done: todo.isDone}"> -->v-bind:を省略
<span :class ="{done: todo.isDone}">//todo.isDoneがtrueの時、doneというクラスが適用
{{ todo.title }}
</span>


最後にCSSで状態を表現

HTML側でtodo.titleにクラスを指定したのでCSSで装飾します。

#app li > span.done{

text-decoration: line-through;
color: blue;
}

id=appのクラスがdoneだったらCSSを適用するようにしています。

text-decoration: line-through;で打ち消し線になってます。

以上で、表題のToDoアプリの完了状態の管理ができるようになりました!

今回のサンプルはこちらで確認できます。

完成形はこんな感じで、タスクを完了(チェック)すると文字が青くなり横線が入るようになります。

Screen Capture 46.mp4.gif