一个简单的TodoList 挂个链接点这里
<html>
<head>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app" class="container">
<div class="page-header row" style="margin-top:5vh;">
<div class="alert" style="width:80%;margin:0 auto;text-align:center">
注意:回车自动添加,注意先输入要做的事,再输入时间,空格隔开
<input id="todo"
class="form-control"
v-model="newTodo"
v-on:keyup.enter="addNewTodo"
placeholder="Enter New TodoItem"
style="width:30%;margin:0 auto"
/>
</div>
</div>
<!--
<ul>
<todo-item
v-for="(item,index) in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
v-on:remove="groceryList.splice(index,1)"
>
</todo-item>
</ul>
-->
<div class="content">
<h3>这是一个ToDoList(待办事项列表),你可以添加/删除代办事项</h3>
<h4 style="display:inline-block;">未完成事项 </h4><span class=" badge">{{groceryList.length}}</span>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>ToDoMsg</th>
<th>Date</th>
<th>Operate</th>
</tr>
<tr v-for="(item,index) in groceryList" >
<td>{{index+1}}</td>
<td>{{item.msg}}</td>
<td>{{item.date}}</td>
<td><button class="btn btn-default" v-on:click="remove(index)">已完成<span class="glyphicon glyphicon-ok"></span></button></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
/*
Vue.component('todo-item',{
props:['todo'],
template:'<tr><td>{{todo.msg}}</td><td>{{todo.date}}</td><td><button v-on:click="$emit(\'remove\')">X</button></td><tr>'
//template:'<tr><th>123123133</th></tr>'
});
*/
var vm = new Vue({
el:'#app',
data:{
groceryList:[
{id:1,msg:'今天复习英语了吗?',date:'2017-10-3'},
{id:2,msg:'今天写代码了吗?',date:'2017-10-3'},
{id:3,msg:'今天运动了吗?',date:'2017-10-3'},
],
nextTodoId:4,
newTodo:'',
},
methods:{
addNewTodo:function(){
this.groceryList.push(
{id:this.nextTodoId++,msg:this.newTodo.split(' ')[0],date:this.newTodo.split(' ')[1]}
);
this.newTodo = '';
},
remove:function(index){
this.groceryList.splice(index,1);
}
}
/*
created:function(){
alert('Hello ChengXiang!');
}*/
});
</script>
</body>
</html>