Vue实现简单ToDoList

来源：互联网发布：淘宝网天猫商城女装编辑：程序博客网时间：2024/05/17 11:05
一个简单的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-itemv-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>
阅读全文
0 0