vue-cli中实现dolist

<template>
  <div id="app">
   <!-- vue的模板里面要被所有的内容要被一个根节点为包含 -->
    <input type="text" v-model='info'> <!--双向绑定一个文本框-->
    <button @click = 'doAdd()'>+增加</button><!--给增加按钮绑定一个方法-->
    <br>
    <hr>
    <h2>正在进行</h2>
    <ul>
      <li v-for="(item, index) in list01" :key="index" v-if='!item.status'><!--动态给listo1表中增加数据,循环渲染-->
       <p class="bk"><input type="checkbox" v-model='item.status'> <span class="text">{{item.mydata}}</span> <button @click='doDelete(index)'>删除</button></p>
      </li>
    </ul>
    <h2>已完成</h2>
    <ul>
        <li v-for="(item, index) in list01" :key="index" v-if='item.status'><!--动态给listo1表中增加数据,循环渲染-->
         <p class="bk"><input type="checkbox" v-model='item.status'> <span class="text">{{item.mydata}}</span> <button @click='doDelete(index)'>删除</button></p>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {//业务逻辑里面定义的数据
    return {
      info:'',//关联文本框双向绑定
      list01:[],//储存文本框中传过来的数据
    }
  },
  methods: {
    doAdd(){
      this.list01.push({
        mydata:this.info,
        status:false
      })//给列表中增加数据
      this.info = ''//将文本框内容清空
    },
    doDelete(key){
      this.list01.splice(key,1)//将列表中指定位置的数据从列表中删除
    },

  }
  
}
</script>

<style lang="scss">
  button{
    float:right;
    margin-right: 100px;
  }
  .text{
    padding-left: 200px;
    padding-right: 200px;
  }
input[type='text']{
  width: 400px;
}
  .bk{
    padding: 10px;
    background-color: aquamarine;
  }
  li{
    list-style: none;
  }
  .red{
    color: red;
  }
  .blue{
    color: blue;
  }
</style>

实现效果: