【bootstrap+Vue编写todoList】

最新推荐文章于 2021-01-08 19:59:33 发布

wang拾柒

最新推荐文章于 2021-01-08 19:59:33 发布

阅读量239

点赞数

本文链接：https://blog.csdn.net/weixin_42160554/article/details/83415809

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			#textarea{
				resize:none;
				height:200px;	
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<div class="container">
				<h1>todoList</h1>
				<div class="alert alert-success" role="alert" v-if="isShow">
					删除成功
				</div>
				<form>
					<div class="form-group">
						<textarea class="form-control" id="textarea" v-model="sendTxt"></textarea>
					
					</div>
					<div class="form-group">
						<button class="btn btn-danger" type="button" @click="addInfo">发送</button>
						<button class="btn btn-success" type="button" @click="del">删除</button>
					</div>
				</form>
				<hr />
				
				<div class="panel panel-default">
					<div class="panel-heading">
						<span>待完成:{{noDoneNum}}</span>
						<span>已完成:{{doneNum}}</span>
					</div>
					<div class="panel-body">
						<ul class="list-group">
							<li class="list-group-item" v-for="(item,index) in nodoneList">
								{{item.content}}
								<span class="badge">
									<input type="checkbox" v-model="checkItem" :value="index" />
								</span>
							</li>
						</ul>
						<hr />
						<h4>历史记录</h4>
						<ul class="list-group">
							<li class="list-group-item" v-for="(item,index) in nodeList">
								{{item.content}}
							</li>
						</ul>
					</div>
				</div>
				
			</div>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					nodoneList:[
						{id:1,content:"这是内容1"},
						{id:2,content:"这是内容2"},
						{id:3,content:"这是内容3"},
						{id:4,content:"这是内容4"},
						{id:5,content:"这是内容5"}
					],
					nodeList:[],
					sendTxt:"",
					checkItem:[],
					isShow:false,
					idInfo:"",
					contenrInfo:""
				},
				computed:{
//					待完成
					noDoneNum:function(){
						return this.nodoneList.length
					},
//					已完成
					doneNum:function(){
						return this.nodeList.length
					}
				},
				methods:{
//					发送
					addInfo(){
						var newObj = {
							id:this.nodoneList.length+1,
							content:this.sendTxt
						}
						this.nodoneList.push(newObj)
					},
//					删除
					del(){
						if(this.checkItem.length==0){
							alert("请勾选")
						}else{
							if(confirm("你确定要删除吗？")){
								this.isShow=true
							var arr = []
							var len = this.nodoneList.length
							for (var i=0;i<len;i++) {
								if(this.checkItem.indexOf(i)>=0){
									this.nodeList.push(this.nodoneList[i])
								}else{
									arr.push(this.nodoneList[i])	
							}
						}
							console.log(this.nodeList)
							this.nodoneList = arr
							this.checkItem = []
							this.vanish()
							}
						}
					},
					//删除成功
					vanish(){
						var _this=this
						setTimeout(function(){
							_this.isShow=false
						},2000)
					}
				}
			})
		</script>
	</body>
</html>

wang拾柒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【bootstrap+Vue编写todoList】

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/vue.js" &gt;&am
复制链接

扫一扫