1. 程式人生 > >Vue 學習之旅

Vue 學習之旅

Vue.component('todo-items',{ template:'#todo-items-template', props:['todos'], methods:{ deletetodo(index){ this.todos.splice(index,1) }, toggleCompletion(todo){ todo.completed = ! todo.completed }
} }); Vue.component('todo-form',{ template: '#todo-form-template', props:['todos'], data(){ return{ newtodo:{id:null,title:'',completed:false} } }, methods:{ addtodo(newtodo) { this
.todos.push(newtodo); this.newtodo={id:null,title:'',completed:false} }, } }); new Vue({ el:'#app', data:{ message:'hello Vue js 2.0', todos:[ {id:1,title:'learn Vue js',completed:false} ]
, }, computed:{ todoCount(){ return this.todos.length } }, })