<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
body {
background-color: darkgray;
}
header {
width: 100%;
min-width: 1434px;
height: 50px;
background-color: rgba(47, 47, 47, 0.98);
}
header section {
width: 600px;
height: 50px;
margin: 0px auto;
}
header section label {
width: 100px;
color: rgb(221, 221, 221);
line-height: 50px;
font-size: 24px;
float: left;
}
header section input {
width: 360px;
height: 24px;
margin-top: 12px;
float: right;
padding-left: 20px;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
border-radius: 5px 5px 5px 5px;
border: none;
outline: none;
}
section h2 {
width: 600px;
height: 32px;
margin: 0px auto;
margin-top: 20px;
margin-bottom: 20px;
}
section span {
float: right;
background-color: rgb(230, 230, 250);
width: 9px;
height: 20px;
padding-left: 5px;
padding-right: 5px;
border-radius: 50px;
font-size: 14px;
line-height: 20px;
}
section {
width: 600px;
margin: 0px auto;
}
footer {
width: 600px;
margin: 0px auto;
text-align: center;
color: rgb(102, 102, 102);
font-size: 14px;
}
footer a {
color: rgb(153, 153, 153);
}
ol li{
width: 600px;
height: 32px;
position: relative;
margin-bottom: 10px;
}
ol li input{
width: 22px;
height: 22px;
margin-top: 2px;
top: 2px;
left: 10px;
margin-left: 4px;
position: absolute;
}
ol li p{
width: 506px;
height: 32px;
float: left;
padding-left: 45px;
padding-right: 45px;
background-color: rgb(255, 255, 255);
border-left: 5px solid rgb(98, 154, 156);
line-height: 32px;
}
ol li a{
width: 14px;
height: 12px;
right: 5px;
top: 5px;
position: absolute;
border: 6px solid rgb(255, 255, 255);
background-color: rgb(204, 204, 204);
margin-left: 2px;
font-size: 14px;
padding-left: 6px;
border-radius: 14px 14px 14px 14px;
color: rgb(255, 255, 255);
}
ul li{
width: 600px;
height: 32px;
position: relative;
margin-bottom: 10px;
}
ul li input{
width: 22px;
height: 22px;
margin-top: 2px;
top: 2px;
left: 10px;
margin-left: 4px;
position: absolute;
}
ul li p{
width: 506px;
height: 32px;
float: left;
padding-left: 45px;
padding-right: 45px;
background-color: rgb(255, 255, 255);
border-left: 5px solid rgb(98, 154, 156);
line-height: 32px;
}
ul li a{
width: 14px;
height: 12px;
right: 5px;
top: 5px;
position: absolute;
border: 6px solid rgb(255, 255, 255);
background-color: rgb(204, 204, 204);
margin-left: 2px;
font-size: 14px;
padding-left: 6px;
border-radius: 14px 14px 14px 14px;
color: rgb(255, 255, 255);
}
</style>
<div id="app">
<header>
<section>
<form action="javascript:postaction()" id="form">
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
autocomplete="off" v-model="message" @keydown="down($event)">
</form>
</section>
</header>
<section>
<!-- οnclick="save()" -->
<h2>正在进行 <span id="todocount">{{arr.length}}
</span></h2>
<ol id="todolist" class="demo-box">
<li draggable="true"><input type="checkbox" @change="update(index)" v-for="(item,index) in arr" :key="item">
<p id="p-0" οnclick="edit(0)">{{item}}</p><a href="javascript:remove(0)" @click="removed(index)">-</a>
</li>
</ol>
<h2>已经完成 <span id="donecount">{{Arrays.length}}</span></h2>
<ul id="donelist" >
<li draggable="true"><input type="checkbox" @change="date(index)" v-for="(item,index) in Arrays" :key="item" checked >
<p id="p-0" οnclick="edit(0)">{{item}}</p><a href="javascript:remove(0)" @click="remove(index)">-</a>
</li>
</ul>
</section>
<footer>
Copyright © 2024 todolist.cn <a href="javascript:clear();" @click="clear()">clear</a>
</footer>
</div>
<script src='lib/vue.global.js'></script>
<script>
const {
createApp
} = Vue文章来源：https://www.toymoban.com/news/detail-798294.html
const app = createApp({
data() {
return {
message: '',
arr: [],
Arrays:[]
}
},
methods: {
down(e) {
if (e.keyCode === 13&&this.message.trim()!='') {
this.arr.push(this.message)
this.message=' '
}
},
update(i){
this.Arrays.push(this.arr[i])
this.arr=this.arr.filter((item,index)=>{
return i!=index
})
},
date(i){
this.arr.push(this.Arrays[i])
this.Arrays=this.Arrays.filter((item,index)=>{
return i!=index
})
},
remove(i){
this.Arrays=this.Arrays.filter((item,index)=>{
return i!=index
})
},
removed(i){
this.arr=this.arr.filter((item,index)=>{
return i!=index
})
},
clear(){
this.Arrays=[]
this.arr=[]
}
}
})
app.mount('#app')
</script>
</body>
</html>文章来源地址https://www.toymoban.com/news/detail-798294.html
到了这里，关于Vue待办事项的实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
