簡単なTODOアプリケーション -『Vue.js』
- uto usui
- //
- javascript
- UI
- 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;
}
}
});