Vue.js指令小练习003 todolist

需求：
在这里插入图片描述
分析：

文本框输入的内容可以添加到ul上
未√的选择框的总数为未完成总数
任务总数等于li条数
点击li会出现文本框可被编辑
打√的选择框内容颜色变淡出现删除线并且不可被编辑
点击完成打√的li会被删除掉

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 350px; 
				margin: 30px auto; 
				background: #eee; 
				padding: 30px 50px;
			}
			li{
				list-style: none;
			}
			ul{
				padding-left: 0;
			}
			.add{
				width: 200px; 
				height: 20px; 
				margin-right: 10px;
			}
			.finish{
				color: #ccc; 
				text-decoration: line-through;
			}
			.span1{
				color: skyblue;
			}
		</style>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<h1>任务列表</h1>
			<p>任务总数：{{ arr.length }}条；还有：{{ choose() }}条未完成；【<span class="span1" @click="finish()">完成</span>】</p>
			<ul>			
				<li v-for='(v,k) in arr'>
					<input type="checkbox" v-model="v.bol" />
					<span class="span2" v-show="!v.edit" v-bind:class="{finish:v.bol}" @click="edit(k)">{{ v.des }}</span>
					<input type="text" v-show="v.edit" v-model="v.des" @blur='v.edit=false' />
				</li>	
				<li>
					<input type="text" v-model="msg" />
					<button @click="add()">添加</button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#div',
			data:{
				arr: [
					{des:'HTML',bol:false,edit:false},
					{des:'CSS',bol:false,edit:false},
					{des:'JS',bol:false,edit:false},
					{des:'JQ',bol:false,edit:false}
				],
				msg: ''
			},
			methods:{
				add: function(){
						this.arr.push({des:this.msg,bol:false,edit:false});
						this.msg = '';
				},
				choose: function (i){
						var num = 0;
						this.arr.forEach(function (res){
							if (res.bol==false) {
								num++;
							}
						});
						return num;
				},
				finish: function(){
					var temp = this.arr;
					this.arr =[];
					for (var i = 0; i < temp.length; i++) {
						if (temp[i].bol == false) {
							this.arr.push(temp[i]);
						}
					}
				},
				edit: function (k){
					if (this.arr[k].bol){
						return;
					}
					this.arr[k].edit = true;
				}
				
			},
		})
	</script>
</html>

Vue.js指令小练习003 todolist

猜你喜欢