vue.js入門_07_TODOアプリ

by s9iwork

HTML

<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>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

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(e) {
      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);
    }
  }
})