vue-todos增删改案例，删除数组里面的元素用for循环，不能用foreach

html文件：

<section class="todoapp" id="app">
			<header class="header">
				<h1>todos</h1>
				<input class="new-todo" placeholder="What needs to be done?" autofocus v-on:keydown.enter="add">
			</header>
			<!-- This section should be hidden by default and shown when there are todos -->
			<template v-if="todos.length">
				<section class="main">
				<input id="toggle-all" class="toggle-all" type="checkbox" v-on:change="handleToggleAllChange">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<!-- These are here just to show the structure of the list items -->
					<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->

					<!-- 任务项有三种状态
					已完成 completed
					未完成 无样式
					编辑  edit -->

					<li v-bind:class="{completed: item.completed, editing: currentEditing === item ? true : false}" v-for="(item,index) in todos">
						<div class="view">
							<input class="toggle" type="checkbox" v-model="item.completed">
							<!-- 注册双击事件 dblclick-->
							<label v-on:dblclick="dblclick(item)">{{ item.title }}</label>
							<button class="destroy" v-on:click="remove(index)"></button>
						</div>
						<input class="edit" v-bind:value="item.title" v-on:keyup.enter="keyupSave(item, index, $event)" v-on:blur="keyupSave(item, index, $event)" v-on:keyup.esc="escDontSave(item)">
					</li>
				</ul>
				</section>
			<!-- This footer should hidden by default and shown when there are todos -->
			 	<footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>0</strong> item left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters">
					<li>
						<a class="selected" href="#/">All</a>
					</li>
					<li>
						<a href="#/active">Active</a>
					</li>
					<li>
						<a href="#/completed">Completed</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<!-- 只要有一个被选中就显示 -->
				<button class="clear-completed" v-if="todos.some(item => item.completed)" v-on:click="clearCompleted">Clear completed</button>
				</footer>
			</template>
		</section>

app.js文件：

;(function () {
	var todos = [
		{
			id: 1,
			title: '吃饭',
			completed: false
		},
		{
			id: 2,
			title: '睡觉',
			completed: false
		},
		{
			id: 3,
			title: '打豆豆',
			completed: true
		}
	]


	var app = new Vue({
		el: '#app',
		data: {
			todos,
			/*message: 'jj'*/
			currentEditing: ''
		},
		methods: {
			add: function (e) {
				//不用双向绑定，这个回车事件是由input表单绑定的，事件对象指向表单
				//事件对象指向绑定这个事件的对象
				//e.target.value指向表单输入的内容
				console.log(e.target.value)
				// 0、注册按下回车事件
				// 1、获取文本框内容
				var value = e.target.value.trim()
				// 2、数据校验
				if (!value) {
					return false 
				}
				// 3、添加到todos里面
				var member = {
					id: todos.length ? this.todos[this.todos.length - 1].id + 1 : 1,
					title: value,
					completed: true
				}
				todos.push(member)
				e.target.value = ''
			},
			handleToggleAllChange: function (e) {
				var change = e.target.checked
				this.todos.forEach(function (item, i) {
					item.completed = change
				})
			},
			remove: function (id) {
				this.todos.splice(id, 1)
			},

			dblclick: function (item) {
				this.currentEditing = item
			},

			keyupSave: function (item, index, e) {
				var value = e.target.value.trim()
				if (!value.length) {
					//当文本框中的内容为空，敲回车时删除这个文本框
					this.todos.splice(index, 1)	
				} else {
					// 当文本框不为空按enter键时，保存修改的值，并且清除这个文本框
					item.title = value
					this.currentEditing = null
				}
			},

			escDontSave: function (item) {
				console.log('111')
				this.currentEditing = null
			},

			clearCompleted: function () {
				// for循环实现
				// for(var i = 0; i < this.todos.length; i++) {
				// 	if (this.todos[i].completed) {
				// 		console.log(1)
				// 		this.todos.splice(i, 1)
				// 		//前面的被删了，后面的所有元素索引要减1，因为前面的被删了，后面的索引都变了
				// 		i--
				// 	}
				// }


				// 错误方法，不能再foreach里面删除数组元素，因为删除一个后面的索引变了
				// this.todos.forEach(function (item, i) {
				// 	if (item.completed) {
				// 		todos.splice(i, 1)
				// 	}	
				// })


				// 简单粗暴的方法,数筛选，给todos重新赋值，把符合条件的放进去
				this.todos = this.todos.filter(item => !item.completed)
				
				
			}
		}
	})

	

})();