VUE todolist

VUE todolist 项目介绍

本次分成四个组件
由于本人css样式表玩得一点都不熟练，所以本次只是针对功能做了一个介绍,点击Item动态出现删除按钮一旦鼠标释放删除按钮消失

红色笔记为三部门，分别为头部通过回车键输入内容，中间为内容展示，下面为内容统计
为了模块更清晰化分成了四个组成部分，MyHeader.vue，MyItem.vue，MyList.vue,MyFooter.vue，实现方式采用了父子组件通信方式实现
首先Myheader.vue很简单

<template>
  <div>
      <input type="text" v-model="sigitem" @keyup.enter="addtodo"> 
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
    data(){
        return{
            sigitem:''
        }

    },
    methods:{
        addtodo(){
           const todoobj={id:nanoid(),title:this.sigitem,done:false}
           this.$emit('receive',todoobj)
           this.sigitem=''
        }
    }
}
</script>

<style>

</style>

MyItem.vue 代码展示

// An highlighted block
var foo = 'bar';<template>
    <li>
      <input type="checkbox" :checked="todo.done" @click="changedone(todo.id)" >
      <span>{{todo.title}}</span>
      <button @click="handledelete(todo.id)"> 删除</button>
    </li>
</template>

<script>
export default {
props:['todo','checktodo','deltetodo'],
methods:{
  changedone(id){
    console.log(id)
    this.checktodo(id)
  },
  handledelete(id){
    if(confirm("确认删除吗？")){
      console.log("删除的ID为:",id)
      this.deltetodo(id)

    }
    
  }
}
}
</script>

<style scoped>
li button{
  display: none;
}
li:hover button{
  display:inline;
}
</style>

MyList.vue代码展示

<template>
<ul >
    <!-- {{todos}} -->
    <my-item v-for="todoobj in todos" 
             :key="todoobj.id" 
             :todo="todoobj" 
             :checktodo="checktodo"
             :deltetodo="deltetodo">
    </my-item>
</ul>
</template>

<script>
import MyItem from './MyItem.vue'
export default {
  components: { MyItem },
  props:['todos','checktodo','deltetodo'],
  data(){
     return{}
  }
}
</script>

<style>

</style>

MyFooter.vue代码展示

<template>
  <div v-show="total">
      <input type="checkbox" :checked="isall" @change="checkall">已完成{{finish}}/总共{{total}}
  </div>
</template>

<script>
export default {
  props:['todos','checkAllTodo'],
  computed:{
    total(){
      return this.todos.length 
    },
    finish(){
     return this.todos.filter((todo)=>{
        return todo.done===true
      }).length
    },
    isall(){
      return this.total===this.finish && this.total>0
    }
},
methods:{
  checkall(e){
    console.log(e.target.checked)
    // this.checkAllTodo(e.target.checked)
    this.$emit('chekallbtn',e.target.checked)
  }
}
}
</script>

<style>

</style>