Vue.jsでToDoList

Vue.js

2018.09.142018.09.21

Vue.jsのお勉強。

とりあえずデータの保存は置いておいて、
・TODOリストの追加、削除
・チェックボックスにチェックで取り消し線表示
を実装するまで。

操作イメージは以下のような感じで。

HTML

<html lang="jp">
<head>
  <link rel="stylesheet" href="css/main.css">
  <title>TODO List</title>
</head>
<body>
  <div id="app">
  <h2>
   TODO List
  </h2>
  <form v-on:submit.prevent>
    <input type="text" v-model="newItem">
    <button v-on:click="additem">
    Add
    </button>
  </form>
  <ul>
    <li v-for="(todo, index) in todos">
      <input type="checkbox" v-model="todo.isDone">
      <span v-bind:class="{done: todo.isDone}">{{todo.item}}</span>
      <button v-on:click="deleteitem(index)">
      delete
      </button>
    </li>
  </ul>
  <!-- <pre>{{$data}}</pre> -->

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

CSS

#app ul{
  list-style:none;
}

#app li > span.done {
  text-decoration: line-through;
}

JavaScript

var app = new Vue({
	el: "#app",
        data: {
            newItem: '',
            todos: [],
        },
        methods: {
            additem: function(event){
                if(this.newItem == '') return;
                var todo = {
                    item: this.newItem,
                    isDone: false,
                };
                this.todos.push(todo);
                this.newItem = '';
            },
            deleteitem: function(index){
                this.todos.splice(index,1)
            }
        }
})