2017-09-29

簡単なTODOアプリケーション -『Vue.js』

Vue.jsで作るTODOアプリケーションです。


const app = new Vue({
  el: '#app',
  data: {
    todoText: '',
    todos: [
            {
        text: 'task A',
        done: true
      },
      {
        text: 'task B',
        done: false
      },
        ]
  },
  methods: {
        addTodo: function() {
            let newTodo = this.todoText.trim();
      if (!newTodo) {return;}

            this.todos.push(
                {
          text: newTodo,
          done: false
        }
            );
            this.todoText = '';
        }
    },
  computed: {
    // アクティブなtodoを数える
        remaining: function() {
            let count = 0,
            todos = this.todos,
          length = todos.length;

            for (var i = 0; i < length; i++) {
                if (!todos[i].done) {
                    count++;
                }
            }

            return count;
        }
    }
});