IMWeb训练营作业——TodoList——隔壁IT王大头

隔壁王大头

于 2017-04-19 23:35:29 发布

阅读量264

点赞数

文章标签： Vue.js的学习

本文链接：https://blog.csdn.net/qq_36052339/article/details/70248842

版权

初始页面：

最终运行效果图：

核心代码部分：

/*js文件*/

<script>
	var list = [];
	new Vue({
		el: ".main",
		data: {
			list: list,
			newlist: "",
			editTodos: '',
			beforeText: ''
		},
		computed: {
			noCheckeLength: function () {
				return this.list.filter(function (item) {
					return !item.ischecked
				}).length
			}
		},
		methods: {
			addevent() {
				if (!(this.newlist === "")) {
					this.list.push({
						text: this.newlist,
						ischecked: false
					});
				}
				this.newlist = '';
			},
			deletevent(ev) {
				var index = this.list.indexOf(ev);
				this.list.splice(index, 1);
			},
			editTodo(todo) {   //编辑中
				console.log();
				this.beforeText = todo.text;
				this.editTodos = todo;
			},
			editTodoed(todo) {   //编辑成功
				this.editTodos = '';
			},
			canceleditTodo(todo) {    //取消编辑
				todo.text = this.beforeText;
				this.beforeText = '';
				this.editTodos = '';
			}
		},
		directives: {
			"foucs": {
				update(el, binding) {
					if (binding.value) {
						el.focus();
					}
				}
			}
		}
	});
</script>

/*HTML+Js*/（js直接写在页面中）

<!DOCTYPE html>
<html>

<head>
	<title>VueDemo.html</title>

	<meta name="keywords" content="keyword1,keyword2,keyword3">
	<meta name="description" content="this is my page">
	<meta name="content-type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">

	<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" href="index.css">
	<script type="text/javascript" src="vue.js"></script>
</head>

<body>
	<div class="page-top">
		<div class="page-content">
			<h2>腾讯课堂IMWeb第一次作业——TodoList——隔壁IT王大头</h2>
		</div>
	</div>
	<div class="main">
		<h3 class="big-title">添加任务：</h3>
		<input type="text" class="task-input" placeholder="如：我要做全栈工程师；按回车键即可添加任务！" v-on:keyup.enter="addevent" v-model="newlist"
		/><br>
		<ul class="task-count" v-show="list.length">
			<li style="color:orange">{{noCheckeLength}}个任务未完成</li>
</ul>
<h3 class="big-title">任务列表：</h3>
<div class="tasks">

	<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
	<ul class="todo-list">
		<li class="todo" :class="{completed:item.ischecked,editing: item === editTodos}" v-for="item in list">
			<div class="view">
				<input class="toggle" type="checkbox" v-model="item.ischecked" />
				<label v-on:dblclick="editTodo(item)">{{item.text}}</label>
				<button class="destroy" v-on:click="deletevent(item)"></button>
			</div> <input class="edit" type="text" v-foucs="editTodos === item" v-model="item.text" v-on:blur="editTodoed(item)" v-on:keyup.enter="editTodoed(item)"
				v-on:keyup.esc="canceleditTodo(item)" />
		</li>
	</ul>
</div>
</div>
<script>
	var list = [];
	new Vue({
		el: ".main",
		data: {
			list: list,
			newlist: "",
			editTodos: '',
			beforeText: ''
		},
		computed: {
			noCheckeLength: function () {
				return this.list.filter(function (item) {
					return !item.ischecked
				}).length
			}
		},
		methods: {
			addevent() {
				if (!(this.newlist === "")) {
					this.list.push({
						text: this.newlist,
						ischecked: false
					});
				}
				this.newlist = '';
			},
			deletevent(ev) {
				var index = this.list.indexOf(ev);
				this.list.splice(index, 1);
			},
			editTodo(todo) {   //编辑中
				console.log();
				this.beforeText = todo.text;
				this.editTodos = todo;
			},
			editTodoed(todo) {   //编辑成功
				this.editTodos = '';
			},
			canceleditTodo(todo) {    //取消编辑
				todo.text = this.beforeText;
				this.beforeText = '';
				this.editTodos = '';
			}
		},
		directives: {
			"foucs": {
				update(el, binding) {
					if (binding.value) {
						el.focus();
					}
				}
			}
		}
	});
</script>
</body>

</html>

隔壁王大头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IMWeb训练营作业——TodoList——隔壁IT王大头

初始页面：最终运行效果图：核心代码部分：/*js文件*/ var list = []; new Vue({ el: ".main", data: { list: list, newlist: "", editTodos: '', beforeText: '' }, computed: { noCheckeLeng
复制链接

扫一扫