Vue 學習之旅
阿新 • • 發佈:2018-12-21
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
}
},
})