Vue待办事项的实现

<!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

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>

相关推荐
再见了那维莱特1 分钟前
6.29 drilling notes
前端
前端付豪1 分钟前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
未等与你踏清风1 分钟前
学习总结 关于DSL的领悟
前端
摆烂为不摆烂1 分钟前
💡前端入门:AbortController 能中断哪些事件?一文搞懂!
前端
杨进军6 分钟前
React 实现 useState
前端·react.js·前端框架
用户40812812003817 分钟前
eval执行字符串
前端
用户40812812003817 分钟前
argument对象是什么
前端
拾光拾趣录9 分钟前
Webpack性能优化:10个杀手级提速技巧
前端·webpack·turbopack
aPurpleBerry9 分钟前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年14 分钟前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript