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>

相关推荐
gnip10 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart10 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.10 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu11 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss11 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师11 小时前
React面试题
前端·javascript·react.js
木兮xg11 小时前
react基础篇
前端·react.js·前端框架
ssshooter11 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘12 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai12 小时前
HTML HTML基础(4)
前端·html