运用Vue完成TodoList的初步实现

运用Vue完成TodoList的初步实现

初步实现TodoList的增、删、改功能。

一、初步的分析：

​

有信息的录入：

动态的变化列表中的值就需要用到v-model 来进行数据的传递。而动态的创建列表就需要用到v-for来进行列表的遍历，可以使用数组或者对象的方式进行遍历。

有数据的删除和修改：

数据的删除和修改需要使用函数的方式进行操作。而操作的对象是当前所需要删除或修改的对象，要满足这一点就需要找到当前对象所在的下标，用下标来解决。

二、具体的操作：

(```)

	<div id="app">
		<input type="text" name="" id="" value=""  @keypress.enter="add" v-model="value"/>
		<ul>
			<li v-for="(item,index) in list">{{item}}
			&nbsp;&nbsp;<span @click ="del(index)">删除</span>&nbsp;&nbsp;<span @click = "updata(index)">修改</span>
			</li>
		</ul>
	</div>


	<script type="text/javascript">
		new Vue({
			el : "#app",
			data : {
				list : [],
				value : ''
			},
			methods : {
				add(){
					this.list.push(this.value)
					this.value = ''
				},
				del(index){
					this.list.splice(index,1)
				},
				updata(index){
					var val = prompt('请输入新值')
					this.list.splice(index,1,val)
				}
			}
		})
	</script>

(```)