欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

运用Vue完成TodoList的初步实现

程序员文章站 2022-07-14 09:26:57
...

运用Vue完成TodoList的初步实现

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

一、初步的分析:

运用Vue完成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>

(```)