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>

相关推荐
神仙别闹12 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry35 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3