Vue TodoList 页面布局 案例任务列表

此文章是一个Vue.js 指令的练习小案例，适合初学者学习或参考

 案例介绍:运用vue.js指令完成以下效果

当点击选择按钮时使未完成数量改变并改变任务的css样式

点击上方完成按钮删除被选中的任务

 在下方input框内输入新的任务使其添加至上方并让任务总数实时更新

代码参考如下:

html代码:

<div id="box">
			<h1>{
   
   {title}}</h1>
			<span>任务总数: {
   
   {task.length}} ,还有:{
   
   {choose()}} 未完成</span> 【<span class="fina" @click="finish()">完成</span>】
			<br>
			<ul>
				<li v-for="item in task">
					<input type="checkbox" v-model="item.sel" />
					<span :class="item.sel?'lisel':''" v-show="!item.edit" @click="isedit(item)">{
   
   {item.name}}</span>
					<input type="text" v-model="item.name" v-show="item.edit" @blur="isedit(item)" />
				</li>
			</ul>
			<input type="text" v-model="addmsg"><input type="button" value="添加" @click="add()">
		</div>

vue.js指令代码:

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	let vm = new Vue({
		el: '#box',
		data: {
			title: '任务列表',
			task: [{name: '设计',sel: false,edit: false},
				{name: '编写页面代码',sel: false,edit: false},
				{name: '设计产品原型',sel: false,edit: false},
				{name: '编写代码',sel: false,edit: false}
			],
			addmsg: ''

		},
		methods: {
			add: function() {
				this.task.push({
					name: this.addmsg,
					sel: false,
					edit: false
				});
				this.addmsg = '';
			},
			choose: function() {
				var count = 0;
				this.task.forEach(function(item) {
					if (!item.sel) {
						count++;
					}
				});
				return count;
			},
			finish: function() {
				var newitems = this.task; //保存至新数组
				this.task = []; //清空原有数组
				for (var i = 0; i < newitems.length; i++) {
					if (!newitems[i].sel) {
						this.task.push(newitems[i]); //将未被选中的数据进行保存
					}
				}
			},
			isedit: function(item) {
				item.edit = !item.edit;
			}
		}
	})
</script>

css样式代码:

<style type="text/css">
			div {
				background-color: beige;
				width: 350px;
				margin: 50px auto;
				padding: 50px;
				height: 350px;
			}

			ul {
				list-style-type: none;
				padding: 0;
			}

			li {}

			.lisel {
				text-decoration: line-through;
				color: #999;
			}

			.fina {
				color: blue;
			}
		</style>