Vue学习：todolist删除

在list.vue中进行 先对按钮的样式进行操作，然后将获取操作按钮的id 然后进行删除操作

<template>
    <li>
        <label>
            <!-- :checked动态绑定 -   @click="handleCheck(todo.id)" -->
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
              <!--v-model 修改了prop（藏在对象里面-属性值） 但是props只读的 直接就可以实现，但是不推荐，
            因为vue tool监测了表面 但是实际上props被修改了 违反了原则  -->
          <!--   <input type="checkbox" v-model="todo.done" /> -->
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="deleteId(todo.id)">删除</button>
    </li>


</template>
<script>
    export default {
        name: 'Item',
        props: ['todo','changeTodo','deleteTodo'],
        methods: {
            handleCheck(id) {
                //通知app组件将app对应的数据取反--数据在app中 需要对数据操作也在app中
                this.changeTodo(id)
            },
            deleteId(id){
                if(confirm('确定删除吗')){
                    //通知app删除
                   this.deleteTodo(id)
                }
            }
        },

    }
</script>
<style scoped>
    /*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: #aaa;
    }
    li:hover button{
        display: block;
    }
</style>

删除操作咋i数据所在位置，就是app.vue 进行删除操作 然后进行函数传递

<template>

    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
                <!-- 传递函数 -->
                <myHeader :receive="receive"/>
                <List :todos="todos" :changeTodo="changeTodo" :deleteTodo="deleteTodo"/>
                <myFooter />
            </div>
        </div>
    </div>
</template>

<script>
    //引入<School/>组件
    // header不能取名会于内置标签冲突
    import myHeader from './components/myHeader'
    import List from './components/List'
    import myFooter from './components/myFooter'
    export default {
        name: 'App',
        //注册组件
        components: {
            myHeader,
            List,
            myFooter
        },
        data() {
            return {
                todos:[
                    {id:'0001',title:'吃饭',done:true},
                    {id:'0002',title:'打游戏',done:true},
                    {id:'0003',title:'学习',done:false},
                    {id:'0004',title:'上课',done:true},
                ],
            };
        },
        methods: {
            //添加一个todo
            receive(x){
               // console.log('APP收到的数据为：',x)
                // unshift vue可以捕获到对数据的修改
                this.todos.unshift(x)
            },
            //change 选择或者不选择
            changeTodo(id){
                this.todos.forEach((todo)=>{
                    if(todo.id===id) todo.done=!todo.done
                })
            },
            //删除一个id
            deleteTodo(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-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }

    .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 然后是item

<template>
    <ul class="todo-main">
        <Item 
            v-for="todo in todos" 
            :key="todo.id" 
            :todo="todo" 
            :changeTodo="changeTodo"
            :deleteTodo="deleteTodo"
        />
       
    </ul>
</template>
<script>
    import Item from './Item'
    export default {
        name: 'List',
        components: {
            Item,
        },
        props:['todos','changeTodo','deleteTodo']

    }
</script>
<style scoped>
    /*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>