Vue实现简单ToDoList

最新推荐文章于 2023-07-04 17:24:53 发布

ilvseyinfu

最新推荐文章于 2023-07-04 17:24:53 发布

阅读量512

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_31751569/article/details/78157371

版权

Vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一个简单的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>

ilvseyinfu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实现简单ToDoList

一个简单的TodoList 挂个链接点这里注意：回车自动添加，注意先输入要做的事，再输入时间，空格隔开 <input id="todo" class="form-control" v-model="newTodo" v-on:keyup.enter="addNewTodo
复制链接

扫一扫