Vue待办事项（选项卡）

最新推荐文章于 2024-09-17 15:59:01 发布

- 瑾♛年

最新推荐文章于 2024-09-17 15:59:01 发布

阅读量811

点赞数 10

文章标签： vue.js javascript 前端

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

版权

本文介绍了一个使用Vue.js构建的待办事项管理应用，包括输入添加任务、分类查看（全部/已完成/未完成）、复选框选择及删除功能。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           * {
               padding: 0;
               margin: 0;
           }

           ul,
           ol {
               list-style: none;
           }

.header {
width: 400px;

               margin: 0px auto;
               margin-top: 50px;
               box-shadow: 1px 1px 5px 5px;
           }

           .input {
               padding: 10px;
               height: 30px;
               display: flex;
           }

           .input input {
               padding-left: 10px;
               flex: 1;
           }

           .input button {
               width: 60px;
               height: 30px;
           }

           .text {
               padding: 10px;
               display: flex;

}

           .text .list {
               flex: 1;
               background-color: aliceblue;
               text-align: center;
               cursor: pointer;
           }

           /*    .text div:nth-child(1){
               background-color: black;
               color: white;

           } */
           .cart {
               padding: 10px;
           }

.cart li {
height: 20px;

               display: flex;
               margin-bottom: 10px;
           }

           .cart li div {
               flex: 1;
               padding-left: 10px;
           }

           .cart li input {
               height: 20px;
               width: 20px;

}

           .clear {
               padding: 10px;
               display: flex;
           }

           .clear div {
               flex: 1;
           }

           .list.active {
               background-color: black;
               color: white;

}
       </style>
   </head>
   <body>
       <div class="header" id="app">
           <div class="input">
               <input type="text" placeholder="请输入" ref="inputref" v-model="message" />
               <button @click="haddleadd()">添加</button>
           </div>
           <div class="text">
               <div class="list" :class="type=='all'? 'active' : '' " @click="check('all')">所有待办事项({{arr.length}})
               </div>
               <div class="list" :class="type=='some'? 'active' : '' " @click="check('some')">
                   已完成({{computetode.length}})</div>
               <div class="list" :class="type=='every'? 'active' : '' " @click="check('every')">
                   未完成({{uncomputetode.length}})</div>
           </div>
           <div class="cart">
               
               <ul>
                   <li v-for="item in currentarr" :key="item.id">
                       <input type="checkbox" v-model="item.complate" />
                       <div>{{item.text}}</div>
                       <button @click="remove(item.id)">删除</button>
                   </li>
               </ul>
           </div>
           
           <div class="clear">
               <div></div>
               <button @click="removeall()">清除</button>
           </div>
       </div>
       <script src="lib/vue.global.js"></script>
       <script>
           var todeid = 1
       </script>
       <script>
           const {
               createApp
           } = Vue

           const app = createApp({
               data() {
                   return {
                       message: '',
                       arr: [],
                       type: 'all',
                       currentarr: []
                   }
               },
               computed: {
                   computetode() {
                       return this.arr.filter(item => item.complate == true)
                   },
                   uncomputetode() {
                       return this.arr.filter(item => item.complate == false)
                   },
               },
               methods: {
                   haddleadd() {
                       this.$refs.inputref.focus()
                       if (this.message.trim() != '') {
                           this.arr.push({
                               id: todeid++,
                               complate: false,
                               text: this.message.trim()
                           })
                       }
                       console.log(this.arr)
                   },
                   remove(id){
                   this.arr=this.arr.filter(item=>item.id!=id)
                   },
                   removeall(){
                       this.arr=[]
                   },
                   check(types) {

this.type = types

                   }
               },
               watch: {
                   uncomputetode() {
                       if (this.type == 'every') {
                           this.currentarr = this.uncomputetode
                       } else if (this.type == 'some') {
                           this.currentarr = this.computetode
                       } else {
                           this.currentarr =this.arr
                       }
                   },
                   type: {
                       handler(newtype) {
                           console.log(newtype)
                           switch (newtype) {
                               case 'all':
                                   this.currentarr = this.arr
                                   break
                               case 'some':
                                   this.currentarr = this.computetode
                                   break
                               case 'every':
                                   this.currentarr = this.uncomputetode
                                   break
                           }
                       },
                       immediate: true,
                   },
               }
           })
           app.mount('#app')
       </script>
   </body>
</html>