【Vue学习】Vue-cli3构建项目之TodoList效果vue组件化实现

我这里用到是Vue-cli3来构建项目。components文件夹用来存放vue组件，新建的vue组件 todolist.vue文件就是放在这里，根目录下的App.vue是根组件。

App.vue

<template>
  <div id="app" >
    <h1>TodoList</h1>
    <todolist></todolist>
  </div>
</template>

<style>
  #app{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:40%;
    margin:0 auto;
  }

  #app h1{
    text-align: center;
    background: rgb(247, 223, 223);
  }

</style>

<script>
import todolist from "./components/todolist";
export default {
    name: 'app',
    components: {
      todolist
    }
}
</script>

todolist.vue

<template>
    <div class="box">
        <input type="text" v-model="todo" @keyup.enter="add"/>
        <h3>Doing</h3>
        <ul id="todoing">
            <li v-for="(item,key) in list" v-if="!item.cheked">
                <input type="checkbox" v-model="item.cheked"  @click="changeChecked(key)">
                {{item.title}}
                <button @click="deleteItem(key)">delete</button>
            </li>
        </ul>

        <h3>Done</h3>
        <ul id="todone">
            <li v-for="(item,key) in list"   v-if="item.cheked">
                <input type="checkbox" v-model="item.cheked"  @click="changeChecked(key)">
                {{item.title}}
                <button @click="deleteItem(key)">delete</button>
            </li>
        </ul>
    </div>
</template>
<style>
    .box{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .box ul li{
        margin:10px 0;
        border-radius: 8px;
    }

    #todoing li{
        background: rgb(194, 240, 240);
    }
    #todone li{
        background: rgb(205, 240, 194);
    }
</style>

<script>
export default {
    name:'todolist',
    data(){
        return {
            todo:'',
            list:[]
        }
    },
    methods: {
        //添加数据
        add(e){
            this.list.push({title:this.todo,cheked:false});  //添加数据同时添加数据的状态，用于表示事情的完成进度
            this.todo="";//清空文本框
        },
        //删除数据
        deleteItem(key){
            this.list.splice(key,1);
        },
        //修改数据状态
        changeChecked(key){
            this.list[key].checked=!this.list[key].checked;
        }
    }
}
</script>

最终效果：