update

Author: Flyerboy

README.md

@@ -4,22 +4,22 @@
 
 ## TODO list
 简单 `TODO List` 实现。掌握表单绑定，class 绑定，事件绑定。
-[代码地址](./todo.html)
+[代码地址](http://htmlpreview.github.io/?https://github.com/Flyerboy/vue-demo/blob/master/todo.html)
 
 ## 树结构
 树结构的新增，编辑，删除，选中功能的实现。
-[代码地址](./tree.html)
+[代码地址](http://htmlpreview.github.io/?https://github.com/Flyerboy/vue-demo/blob/master/tree.html)。
+
 这个例子前提是必须了解 `components` 的使用， 变量值是怎么传递使用的，递归的使用，和 `$parent`，`$root` 这些知识点。
 
 ## 笔记本
 笔记的新增，编辑，删除，收藏功能的实现。
 中间使用 `markdown` 来实现笔记的展示。
-[代码地址](./note.html)
+[代码地址](http://htmlpreview.github.io/?https://github.com/Flyerboy/vue-demo/blob/master/note.html)
 
 这个例子主要使用了多个组件，`vue-router` 知识的使用。
 
 
-
 ## 购物车功能
 购物车添加，编辑，删除，计算总价功能的实现。
-[代码地址](./cart.html)
+[代码地址](http://htmlpreview.github.io/?https://github.com/Flyerboy/vue-demo/blob/master/cart.html)

todo.html

@@ -18,9 +18,10 @@ <h3 class="text-center">TODO list</h3>
 		<input type="text" class="form-control" v-model="name" @keyup.enter="createTodo()">
 
 		<br />
-		<ul class="list-group">
+		<ul class="list-group form-inline">
 			<li class="list-group-item" v-for="row in lists"  :class="{'disabled': row.checked}">
-				{{ row.name }}
+				<input type="text" class="form-control" v-model="row.name" v-if="row.isEdit" @blur="updateTodo(row)">
+				<span v-if="!row.isEdit">{{ row.name }}</span>
 				<span class="pull-right">
 					<a class="glyphicon glyphicon-edit text-primary" href="javascript:;" @click="editTodo(row)"></a>
 					<a class="glyphicon glyphicon-trash text-danger" href="javascript:;" @click="removeTodo(row)"></a>&nbsp;&nbsp;
@@ -43,16 +44,26 @@ <h3 class="text-center">TODO list</h3>
 					this.lists.push({
 						id: this.k,
 						name: this.name,
-						checked: false
+						checked: false,
+						isEdit: false
 					});
 					this.k = this.k + 1;
 					this.name = '';
 				},
 				editTodo: function(todo) {
-
+					todo.isEdit = true;
+				},
+				updateTodo: function(todo) {
+					todo.isEdit = false;
+					//TODO 数据提交
 				},
 				removeTodo: function(todo) {
-					
+					var _this = this;
+					this.lists.forEach(function(item, index) {
+						if (item.id == todo.id) {
+							_this.lists.splice(index, 1);
+						}
+					});
 				}
 			}
 		});