vue2.0 computed和v-bind:class

<style>
    .completed{
        color:#1ec01e;
        text-decoration: line-through;
    }
</style>

<div id="app">
    <h1>@{{todoCount}}</h1> {{--实时计算computed--}}
    <ul>
        <li v-bind:class="{'completed':todo.completed}" v-for="(todo,index) in todos">@{{todo.title}} {{--v-bind:class completed为true改变为顶部style的样式--}}
            <button  v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']" @click="toggleCompletion(todo)">{{--按钮绑定toggleCompletion(todo)事件--}}
            @{{todo.completed ? 'undo' : 'completed'}}</button>
            <button @click="deleteTodo(index)">delete</button>
        </li>
    </ul>

    <form  @submit.prevent="addTodo(newTodo)">
        <input type="text" v-model="newTodo.title">
        <button value="submit">add</button>
    </form>
</div>
<script>
    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

    },
    })
</script>