Vue待办事项(组件,模块化)

//html页面代码



    
        
        
        
    
    
        


            
          
          
          
        

        
    

//tode-cart.js代码

var AddCart={
                template:`
                


                    

                            

  •                             
                                
    {{item.title}}

                                
                            

  •                     

                

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

//tode-footer.js代码

var AddFooter={
                template:`
                


                    

                    
                

                `
                ,
                methods:{
                    removeall(data){
                        this.$emit('clear',[])
                    }
                },
                
            }
export default AddFooter

//tode-input.js代码

    var AddOptions={
                template:`
                


                
                
                

                `,
              data(){
                  return{
                     message:'' 
                  }
              },
              methods:{
                  haddleadd(data){
                      this.$emit("add",this.message)
                  }
              }
            }
export default AddOptions

//tode-text.js代码

var  AddText={
                template:`
                


            
所有待办事项({{arr.length}})
            

            

                已完成({{computetode.length}})

            

                未完成({{uncomputetode.length}})

                

                `,
                props:['type','arr','uncomputetode','computetode'],
                methods:{
                    check(item){
                        this.$emit('blue',item)
                    }
                }
            }
export default AddText

你可能感兴趣的:(前端,javascript,html)