@{{todoCount}}
 {{-- computed--}}
    

        
@{{todo.title}} {{--v-bind:class completed true style --}}
            {{-- toggleCompletion(todo) --}}
            @{{todo.completed ? 'undo' : 'completed'}}
            delete
        
    

    

        
        add
    


    new Vue({
        el:"#app",
        data:{
            todos:[{id:1,title:1,completed:false},{id:2,title:2,completed:false}],
            newTodo:{id:null,title:'',completed:false}//  completed  false
        },
        computed:{ todoCount(){ return this.todos.length;}  // todoCount 
        },
        methods:{
            addTodo(newTodo){
        this.todos.push(newTodo)
        this.newTodo={id:null,title:''}// 
            },
        deleteTodo(index){
        this.todos.splice(index,1)
            },
        toggleCompletion(todo){
                todo.completed=!todo.completed
            },// false true

    },
    })