本文展示了如何使用Vue.js实现一个简单的TodoList应用，包括输入框绑定与回车新增任务，以及通过点击删除任务的功能。示例中利用v-model双向绑定数据，v-for指令遍历列表，并结合localStorage持久化数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="ipt" @keyup.enter="insert">{{ipt}}
<p v-if="list.length == 0">暂无数据</p>
<ul v-else>
<li v-for="(item,index) in list" @click="del(index)" :key="index">{{item}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
ipt: "", // 表单的数据
list: [] // 列表的数据
},
// 在vue实例创建完成后自动执行
created(){
this.list = localStorage.getItem('list').split(',')
},
methods:{
// 添加事件
insert(){
if(this.ipt){ // input不为空才执行添加
this.list.unshift(this.ipt)
this.ipt = ''
localStorage.setItem('list',this.list)
}
},
// 删除事件
del(ind){
// 提示是否删除
let isdel = confirm('确认删除？')
if(isdel)
this.list.splice(ind,1)
localStorage.setItem('list',this.list)
}
}
})
</script>
</body>
</html>
111111
扫一扫
1222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
