利用Vue方法实现一个简单的TODOlist

最新推荐文章于 2024-08-04 12:12:11 发布

Lurkers.

最新推荐文章于 2024-08-04 12:12:11 发布

阅读量490

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap Vue

本文链接：https://blog.youkuaiyun.com/this_name_true/article/details/86101910

bootstrap 同时被 2 个专栏收录

6 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

本文介绍了一个使用Vue.js、Bootstrap和jQuery构建的简单待办事项列表应用。该应用允许用户输入任务并将其添加到列表中，同时提供完成和删除任务的功能。通过Vue.js的响应式系统，实现了对任务状态的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<title>todolist</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#app{
				width: 70%;
				margin: 50px auto; 
			}
			.done{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<div>
					<div class="form-group">
						<textarea class="form-control" v-model="val"></textarea>
					</div>
					<div class="form-group">
						<button class="btn btn-danger" @click="send">发送</button>
					</div>
				</div>
				
				<hr/>
				
				<ul class="list-group">
					<li class="list-group-item" v-for="(item,index) in list">
						<input type="checkbox" v-model="item.done"/>
						<span :class="{'done':item.done}">{{item.content}}</span>
						<button class="btn btn-success pull-right"  v-if="item.done">完成</button>
						<button class="btn btn-warning pull-right" @click="del(index)" v-else>删除</button>
						<div class="clearfix"></div>
					</li>					
				</ul>
				
			</div>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					list:[
						{id:"1",content:"吃饭饭",done:false},
						{id:"2",content:"睡觉觉",done:false},
						{id:"3",content:"打豆豆",done:false}
					],
					val:""
				},
				methods:{
					send(){
						var obj={
							id:this.list[this.list.length-1].id+1,
							content:this.val,
							done:false
						}
						this.list.push(obj)
						this.val=""
					},
					del(index){
						this.list.splice(index,1)
					}
					
				}
				
			})
		</script>
	</body>
</html>