如果我们想实时的显示我们todos的长度这个业务逻辑可以这样：
<h1>{{message}} ({{todos.length}})</h1>
直接展示todos的length属性，这种可读性不好我们希望以一个变量来展示todos的长度，这就可以使用我们的 computed，js代码：
new Vue({ el:'#app', data:{ message:'hello world', todos:[ {id:1,title:"learn vuejs"}, ], newTodo:{id:null,title:""}//定义一个obj }, computed:{ todoCount(){ return this.todos.length; } }, methods:{ addTodo(newTodo){//es6 this.todos.push(newTodo);//把新的obj添加在数组中， this.newTodo = {id:null,title:""}//初始化newTodo }, deleteTodo(index){ this.todos.splice(index,1);//删除下标为index的元素 } } });
页面中：
<h1>{{message}} ({{todoCount}})</h1>
这样也是可以的，这样主要用于我们在页面当中展示的一些数据可能需要一些处理之后才可以使用。 v-bind：class 设置我们的class，对于我们改变样式是非常有帮助的，比如我们要判断我们的todo item是否是一个完成的状态。
首先我们在我们的todos里面的newTodo中添加一个completed：false，然后使用我们的v-bind：class
<li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
这里就是说如果我们的todo.completed为真就给我们的这个li添加一个class名“completed”，在后面添加一个按钮来控制是否完成。
<button class="btn btn-warning btn-xs pull-right" v-on:click="toggleCompletion(todo)">Complete</button>
当然还要把我们的方法写上，功能就是点击把completed变为相反的状态：
toggleCompletion(todo){ todo.completed = !todo.completed; }
还可以把点击的时候将按钮本省的样式改变 也是用v-bind:class，用另一种形式来写 也就是我们的三目运算符：
<button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
整个的页面：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue2.0</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> <style type="text/css"> .completed{ color: green; font-style: italic; } </style> </head> <body> <nav class="navbar navbar-default navbar-static-top"> <div class="container" id="app"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">welcome Vue 2.0</div> <div class="panel-body"> <input type="text" name="" v-model="message" class="form-control"> <h1>{{message}} ({{todoCount}})</h1> <ul class="list-group"> <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}"> {{todo.title}} <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button> <button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button> </li> </ul> <form v-on:submit.prevent="addTodo(newTodo)"> <div class="form-group"> <input type="text" name="" class="form-gcontrol" placeholder="add a new todo" v-model="newTodo.title"> </div> <div class="from-group"> <button class="btn btn-success" type="submit">add todo</button> </div> </form> </div> </div> </div> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app', data:{ message:'hello world', todos:[ {id:1,title:"learn vuejs",completed:false}, ], newTodo:{id:null,title:"",completed:false}//定义一个obj }, computed:{ todoCount(){ return this.todos.length; } }, methods:{ addTodo(newTodo){//es6 this.todos.push(newTodo);//把新的obj添加在数组中， this.newTodo = {id:null,title:"",completed:false}//初始化newTodo }, deleteTodo(index){ this.todos.splice(index,1);//删除下标为index的元素 }, toggleCompletion(todo){ todo.completed = !todo.completed; } } }); </script> </body> </html>