今天完成的事情：

Todolist：

<input type="text" v-model="todo">
<button @click="doAdd()">+增加</button>

首先写一个input框一个增加的按钮：

data() {
  return {
      msg: 'vue',
      todo:'',
      list:[],
  }

Data里面input的值设置为空，在设置一个空的数组list

<ul>
    <li v-for="item in list">
        {{item}}
    </li>
</ul>

V-for利用双向绑定点击增加的时候在input里面输入值然后出来

,methods:{
    doAdd(){
        /*1获取文本框输入的值，2把文本框的值push到list里面*/
        this.list.push(this.todo);
        /*点击增加后把input里面的值设置为空*/
        this.todo='';
    }

显示结果：

理解：

点增加获取input里面的值todo:’’,获取之后给list push然后就是渲染回显

然后是删除，样式什么就先不计较直接在li里面设置一个按钮：

<li v-for="item in list">
    {{item}}
    <button @click="dedApp()">-删除</button>
</li>

删除的就话首先想到就是获取数组下标很简单，，key

<li v-for="(item,key) in list">
   {{key}}---{{item}}---
    <button @click="dedApp()">-删除</button>
</li>

dedApp(key){
    this.list.splice(key,1)
}

点击删除就是吧list里面的值清空.splice(key,1)是清空数组的固定用法

进行中完成中，首选我们要明白一个逻辑当为true的时候是完成中，反之为进行中

<h2>进行中</h2>
<ul>
    <li v-for="(item,key) in list" v-if="!item.checked">
       {{key}}---{{item.title}}---
        <input type="checkbox" v-model="item.checked">
        <button @click="dedApp()">-删除</button>
    </li>
</ul>
<br>
<hr>
<br>
<h2 >已完成</h2>
<ul>
    <li v-for="(item,key) in list" v-if="item.checked">
        {{key}}---{{item.title}}---
        <input type="checkbox" v-model="item.checked" >
        <button @click="dedApp()">-删除</button>
    </li>
</ul>

利用双向绑定实现点击checkbox跟句判断成为进行中或者是已完成

doAdd(){
    /*1获取文本框输入的值，2把文本框的值push到list里面*/
    this.list.push({
        title:this.todo,
        checked:false
    });
    /*点击增加后把input里面的值设置为空*/
    this.todo='';

},

V-if就是判断，list里面设置的是默认渲染的值：

list:[
    {
        title:'已完成',
        checked:true
    },
    {
        title:'进行中' ,
        checked:false
    }
],