运用Vue完成TodoList的初步实现
程序员文章站
2022-07-14 09:26:57
...
运用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}}
<span @click ="del(index)">删除</span> <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>
(```)
上一篇: Vue CLI
下一篇: iview框架table 跨页多选实现