08 v-bindでクラス操作

2019年8月16日 07:19

今回の学習ポイントは下記となります。

チェックボックスを追加したのち、ToDoの完了状態に応じてv-bindでクラスを切り替えていきます

①チェックボックスの追加
②v-bind

前回ToDo の完了状態がわかるようにチェックボックスを付けてあげます。

ファイルのパス：/VueApp/index.html 


<input type="checkbox"> としてあげます。

チェックボックスがつきましたが、先頭の黒丸が邪魔なのでスタイルをいじっていきます。
では、 #app ul に対して、まず padding を 0 にしつつ、 list-style を none にしてあげるとスッキリするかと思います。

ファイルのパス：/VueApp/css/styles.css


#app ul {
 padding: 0;
 list-style: none;
}

そして、 isDone に応じてチェックボックスをチェックしたいのですが、 checkbox の場合は、単に v-model に対して todo.isDone を紐づけてあげると、 isDone が true のときにはチェックしてくれます。

task 3だけがチェックされていて、新しく ToDo を追加してもチェックされていないのがわかります。

さらに、チェックされた項目については、 done というクラスを付けてあげて、スタイルを変えてあげます。

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

データに応じてクラスを付け替えるには、 v-bind:class というディレクティブを使ってあげます。

<span v-bind:class="{done: todo.isDone}">{{ todo.title }}</span>

どうするかというと、こちらに span タグを付けてあげて、 v-bind:class で done として、 todo.isDone としてあげると、 todo の isDone が true の場合は、 done クラスを付けてくれます。

それから、 v-on と同様に v-bind もよく使われるので、下記このように書くこともできるということも覚えておきます。

       <!-- <span v-bind:class="{done: todo.isDone}">{{ todo.title }}</span> -->
       <span :class="{done: todo.isDone}">{{ todo.title }}</span>

#app li > span.done だったら、 text-decoration を line-through としてあげて、打ち消し線が付くようにしてあげます。

今回完成したソースコードは下記となります。

ファイルのパス：/VueApp/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Vue App</title>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>

 <div id="app" class="container">
   <h1>Todolist</h1>
   <ul>
     <li v-for="(todo, index) in todos">
       <input type="checkbox" v-model="todo.isDone">
       <!-- <span v-bind:class="{done: todo.isDone}">{{ todo.title }}</span> -->
       <span :class="{done: todo.isDone}">{{ todo.title }}</span>
       <span @click="deleteItem(index)" class="command">[x]</span>
     </li>
   </ul>
   <form @submit.prevent="addItem">
     <input type="text" v-model="newItem">
     <input type="submit" value="Add">
   </form>
 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script src="js/main.js"></script>
</body>
</html>

ファイルのパス：/VueApp/js/main.js

(function() {
 'use strict';

 var vm = new Vue({
   el: '#app',
   data: {
     newItem: '',
     todos: [{
       title: 'task 1',
       isDone: false
     }, {
       title: 'task 2',
       isDone: false
     }, {
       title: 'task 3',
       isDone: true
     }]
   },
   methods: {
     addItem: function() {
       var item = {
         title: this.newItem,
         isDone: false
       };
       this.todos.push(item);
       this.newItem = '';
     },
     deleteItem: function(index) {
       if (confirm('are you sure?')) {
         this.todos.splice(index, 1);
       }
     }
   }
 });
})();

ファイルのパス：/VueApp/css/styles.css

body {
 font-size: 16px;
 font-family: Verdana, sans-serif;
}
.container {
 width: 300px;
 margin: auto;
}
#app h1 {
 font-size: 16px;
 border-bottom: 1px solid #ddd;
 padding: 16px 0;
}
#app li {
 line-height: 1.5;
}
#app input[type="text"] {
 padding: 2px;
}
.command {
 font-size: 12px;
 cursor: pointer;
 color: #08c;
}
#app ul {
 padding: 0;
 list-style: none;
}
#app li > span.done {
 text-decoration: line-through;
 color: #bbb;
}

以上

ここから先は

415字

この記事のみ ¥ 100

ログイン

この記事が気に入ったらサポートをしてみませんか？

08 v-bindでクラス操作

ここから先は

有料マガジン ¥ 1,498