vuecli之todo功能删除

app

<template>
    <div id="app">
      <div class="todo-container">
        <div class="todo-wrap">
          
          <MyHeader :addTodo="addTodo"></MyHeader>

          <MyList :todos="todos" :checkTodo="checkTodo" :deletTodo="deletTodo"></MyList>
          
          <MyFooter></MyFooter>
        </div>
      </div>
    </div>
</template>

<script>
import MyFooter from './components/MyFooter.vue'
import MyHeader from './components/MyHeader.vue'
// import MyItem from './components/MyItem.vue' item为list的子组件
import MyList from './components/MyList.vue'
// import School from './components/School.vue'
export default {
  name: 'app',
  components: {
    MyHeader,
    MyFooter,
    
    // MyItem,
    MyList
    // School
  },
  data() {
        return {
            todos:[
                {id:"001",title:"吃饭",done:true},
                {id:"002",title:"抽烟",done:false},
                {id:"003",title:"烫头",done:true},
            ]
        }
    },
  methods: {
    //添加一个toido
    addTodo(todoObj){
      this.todos.unshift(todoObj)
    },
    // 勾选或者取消勾选
    checkTodo(id){
      this.todos.forEach((todo) => {
        if (todo.id===id) {
          todo.done=!todo.done;

        }
      });
    },
    // 删除一个todo
    deletTodo(id){
      this.todos=this.todos.filter((todo)=>{
        return todo.id!==id
      })
    }
  },
}
</script>

<style>
  /*base*/
body {
  background: #fff;
}

.btn {
  /* display: inline-block; */
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-edit {
  color: #fff;
  background-color: lightgreen;
  border: 1px solid green;
  margin-right: 5px;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn-edit:hover {
  color: #fff;
  background-color: green;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

list

<template>

<ul class="todo-main">

<MyItem v-for="(todoObj) in todos"

:key="todoObj.id"

:todo="todoObj"

:checkTodo="checkTodo"

:deletTodo="deletTodo"

></MyItem>

</ul>

</template>

<script>

import MyItem from "./MyItem";

export default {

name:"MyList",

components:{MyItem},

/* data() {

return {

todos:[

{id:"001",title:"吃饭",done:true},

{id:"002",title:"抽烟",done:false},

{id:"003",title:"烫头",done:true},

]

}

}, */

props:[

"todos",

"checkTodo",

"deletTodo"

]

}

</script>

<style>

/*main*/

.todo-main {

margin-left: 0px;

border: 1px solid #ddd;

border-radius: 2px;

padding: 0px;

}

.todo-empty {

height: 40px;

line-height: 40px;

border: 1px solid #ddd;

border-radius: 2px;

padding-left: 5px;

margin-top: 10px;

}

</style>

 

itme

 

<template>

<transition>

<li>

<label>

<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>

<span>{{todo.title}}</span>

<!-- <input type="text"> -->

</label>

<button class="btn btn-danger" @click="handleDelet(todo.id)">删除</button>

<!-- <button class="btn btn-edit">编辑</button> -->

</li>

</transition>

</template>

<script>

export default {

name:"MyItem",

//声明接受tudu对象

props:['todo',"checkTodo","deletTodo"],

// mounted() {

// console.log(this.todo)

// },

methods: {

// 勾选或者取消勾选

handleCheck(id){

this.checkTodo(id);

},

//删除

handleDelet(id){

if (confirm("确定删除吗？")) {

this.deletTodo(id);

}

}

},

}

</script>

<style>

/*item*/

li {

list-style: none;

height: 36px;

line-height: 36px;

padding: 0 5px;

border-bottom: 1px solid #ddd;

}

li label {

float: left;

cursor: pointer;

}

li label li input {

vertical-align: middle;

margin-right: 6px;

position: relative;

top: -1px;

}

li button {

float: right;

display: none;

margin-top: 3px;

}

li:before {

content: initial;

}

li:last-child {

border-bottom: none;

}

li:hover{

background-color: #ddd;

}

li:hover button{

display: block;

}

.todo-enter-active{

animation: todo 0.5s linear;

}

.todo-leave-active{

animation: todo 0.5s linear reverse;

}

@keyframes todo {

from{

transform: translateX(100%);

}

to{

transform: translateX(0px);

}

}

</style>