通过Vue实现TodoList
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ToDoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
html {
background-color: #f3eeee;
}
.container {
margin-top: 100px;
}
/*输入框*/
.text-input {
width: 400px;
height: 40px;
background-color: white;
font-size: 20px;
}
/*去掉圆点*/
li {
list-style: none;
}
/*美化一下*/
.todos {
width: 400px;
height: 40px;
border: 1px solid #999;
background-color: white;
font-size: 20px;
padding: 1px;
text-align: left;
}
/*浮动动画*/
.todos:hover {
background-color: #d9b1b1;
transition: all 0.8s ease;
}
/*添加动画*/
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(60px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
/*v-move指的是元素移动时自动添加的类名*/
.v-move {
transition: all 0.6s ease;
}
.v-leave-active {
position: absolute;
}
.title {
font-weight: lighter;
font-size: 60px;
line-height: 48px;
color: #c5c1c1;
}
/*叉号*/
.incorrect:before {
content: '\2716';
color: #a19798;
float: right;
margin-top: 2%;
}
</style>
</head>
<body>
<div class="container">
<center>
<div id="app">
<ul>
<li>
<!--标题-->
<h1 class="title">todos</h1>
</li>
<!--v-for循环展示每一个todo-->
<li> <input type="text" class="text-input" v-model="todo" @keyup.enter="add" /><i
class="fa fa-close"></i> </li>
<transition-group>
<li v-for="(item,i) in todolist" :key="item.id" class="todos">{{item.todo}}
<span class="incorrect" @click="del(i)"></span>
</li>
</transition-group>
</ul>
</div>
</center>
</div>
<script>
var vm = new Vue({
el: ".container",
data: {
todo: "",
todolist: []
},
methods: {
// 添加方法
add() {
this.todolist.push({
id: this.todolist.length,
todo: this.todo
});
this.todo = "";
},
// 删除方法
del(i) {
this.todolist.splice(i, 1)
}
}
})
</script>
</body>
</html>
效果:
设置了添加动画、删除动画、鼠标浮动动画,回车添加,点击叉号删除。