技巧

一堆数据用数组，属性太多了用对象。

源码

MyList.vue

<template>
    <ul class="todo-main">
        <!-- 给 MyItem组件传数据 其中key可以随便定，但是value不能，此处的value只能 todoObj项
        todoObj 是做事的时候，每一个要做事的对象。

        :todo 给 key=todo 自定义属性 绑定 一个值为 todoObj
        -->
        <MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj"/>
    </ul>
</template>

<script>
    import MyItem from './MyItem'

    export default {
        name:'MyList',
        components:{MyItem},

        data(){
            return {
                todos :[
                    {id:'0001',title:'抽烟', done:true},
                    {id:'0002',title:'喝酒', done:false},
                    {id:'0003',title:'开车', done:true}
                ]
            }
        }
    }
</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>

MyItem.vue

<template>
    <li>
        <label>
            <!-- 默认勾选 
            <input type="checkbox" checked/>
            -->
            <!-- :checked="true" 表示 我们想给 input 添加一个 checked 选项，如果为true就勾选，否则不勾选-->
            <input type="checkbox" :checked="todo.done"/>

            <!--span>xxxxx</span-->
            <!-- 通过插值语法 展示 接收到的 todo对象-->
            <span>{{ todo.title}}</span>

        </label>
        <button class="btn btn-danger" style="display:none">删除</button>
    </li>
</template>

<script>
    export default {
        name:'MyItem',

        //声明接收 todo 对象
        props:['todo'],

        mounted(){
            console.log(this.todo)
        }
    }
</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: #ddd;
    }

    li:hover button{
        display: block;
    }
</style>