Vue待办事项（组件，模块化）

- 瑾♛年

已于 2024-01-17 20:30:37 修改

阅读量637

点赞数 8

文章标签：前端 javascript html

于 2024-01-17 19:30:35 首次发布

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

版权

//html页面代码

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

               text-align: center;
               cursor: pointer;
           }

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

           } */
           .text .active {
               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;
           }

       </style>
   </head>
   <body>
       <div class="header" id="app">
           <my-input @add="addcartin"></my-input>
       <my-text :type="type" @blue="tab" :computetode="computetode" :uncomputetode="uncomputetode" :arr="arr"></my-text>
   <my-cart :list=" currentarr" @remove="remove" ></my-cart>
       <my-clear @clear="removeall"></my-clear>
       </div>
       <script type="module">
           import { createApp } from './lib/vue.esm-browser.js'
           import AddOptions from './components/tode-input.js'
           import AddText from './components/tode-text.js'
           import AddCart from './components/tode-cart.js'
           import AddFooter from './components/tode-footer.js'
           var itemid=1
           const app = createApp({
               data() {
                   return {
       arr:[],
                   type:'all',
                   currentarr:[]
                   }
               },
               computed: {
                   computetode() {
                       return this.arr.filter(item => item.complate == true)
                   },
                   uncomputetode() {
                       return this.arr.filter(item => item.complate == false)
                   },
               },
               methods:{
                   addcartin(title){
                       this.arr.push({
                           id:itemid++,
                           complate:false,
                           title
                       })
                   },
                   removeall(data){
                       this.arr=data
                   },
                   remove(id){
                       this.arr=this.arr.filter(item=>item.id!=id)
                   },
                   tab(data){
                       this.type=data
                   }
               },
               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.component('MyInput', AddOptions)
           app.component('MyText',AddText)
           app.component('MyCart',AddCart)
           app.component('MyClear',AddFooter)
           app.mount('#app')
       </script>
   </body>
</html>

//tode-cart.js代码

var AddCart={
               template:`
               <div class="cart">
                   <ul>
                       <li v-for="item in list">
                           <input type="checkbox" v-model="item.complate" :key="item.id"/>
                           <div>{{item.title}}</div>
                           <button @click="remove(item.id)">删除</button>
                       </li>
                   </ul>
               </div>
               `,

               props: ['list'],
               methods:{
                   remove(id){
                       this.$emit('remove',id)
                   }
               }

           }
export default AddCart

//tode-footer.js代码

var AddFooter={
               template:`
               <div class="clear">
                   <div></div>
                   <button @click="removeall()">清除</button>
               </div>
               `
               ,
               methods:{
                   removeall(data){
                       this.$emit('clear',[])
                   }
               },

           }
export default AddFooter

//tode-input.js代码

var AddOptions={
               template:`
               <div class="input">
               <input type="text" placeholder="请输入" ref="inputref" v-model="message"/>
               <button @click="haddleadd()">添加</button>
               </div>
               `,
           data(){
               return{
                   message:''
               }
           },
           methods:{
               haddleadd(data){
                   this.$emit("add",this.message)
               }
           }
           }
export default AddOptions

//tode-text.js代码

var AddText={
               template:`
               <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>
               `,
               props:['type','arr','uncomputetode','computetode'],
               methods:{
                   check(item){
                       this.$emit('blue',item)
                   }
               }
           }
export default AddText