Vue待办事项的实现

- 瑾♛年

已于 2024-01-16 17:50:28 修改

阅读量779

点赞数 9

文章标签： vue.js javascript 前端

于 2024-01-15 20:32:49 首次发布

本文链接：https://blog.csdn.net/qq_52840130/article/details/135610378

版权

这篇文章介绍了如何使用Vue.js构建一个具有拖拽功能的待办事项列表，包括添加、编辑、删除和状态切换，展示了前端开发中组件化和交互设计的应用。

摘要由CSDN通过智能技术生成

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