如何使用vue编写ToDoList

ToDoList案列

<template>
  <div class="app">
    ToDoList：<input type="text" placeholder="请输入todo" @keyup.enter="add()" v-model="title">
    <!-- 这里使用键盘事件的修饰符回车事件  双向数据绑定-->

    <!-- 未完成 -->
    <h3>未完成 {{this.list.length-fun}} </h3><!-- 总长度减去完成的长度 -->
    <ul>
      <li v-for="(e,i) in list" :key="i" v-show="!e.flag"><!-- flag为false的时候显示 -->
        <input type="checkbox" v-model="e.flag"><!-- 双向数据绑定flag -->
        <span v-show="!e.show" @click="change(i)">{{e.title}}</span>
        <!-- show为false的时候显示 -->
        <input type="text" v-show="e.show" v-model="e.title" @blur="blur(i)">
        <!-- show为true的时候显示  失去焦点隐藏 绑定title 点击可以修改数据-->
        <button @click="del(i)">×</button>
      </li>
    </ul>

    <!-- 已完成 -->
    <h3>已完成 {{fun}} </h3><!-- 返回flag为true的长度 -->
    <ul>
      <li v-for="(e,i) in list" :key="i" v-show="e.flag"><!-- flag为true的时候显示 -->
        <input type="checkbox" v-model="e.flag"><!-- 双向数据绑定flag -->
        <span v-show="!e.show" @click="change(i)">{{e.title}}</span>
        <!-- show为false的时候显示 -->
        <input type="text" v-show="e.show" v-model="e.title" @blur="blur(i)">
        <!-- show为true的时候显示  失去焦点隐藏 绑定title 点击可以修改数据-->
        <button @click="del(i)">×</button>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name:"app",
  data()
  {
    return{
      title:"",
      list:[]//定义一个空数组来接收数据
    }
  },
  methods:{
    add()
    {
      if(this.title=="")
      {
        alert("数据不能为空");
      }
      else
      {
        var obj={
          title:this.title,
          flag:false,
          //用于逻辑判断
          show:false
        }
        this.list.push(obj);
        this.title="";
      }
    },
    del(i)
    {
      this.list.splice(i,1);//删除数据
    },
    change(i)
    {
      this.list[i].show=true;//点击让数据消失 input框显示
    },
    blur(i)
    {
      this.list[i].show=false;//点击让input框消失 更改后的数据显示
    }
  },
  computed:{
    fun()
    {
      return this.list.filter((e,i)=>{
        return e.flag
      }).length//返回已完成的长度
    }
  }
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>