vue实现todolist功能(初学者适用)

todolist案例实现:

完成 todolist首先要清楚 基本的业务逻辑 需要完成哪些功能：

1. 添加功能（添加后可存储在本地 即刷新后页面中仍有数据）
2. 删除功能（删除后可以存储在页面）
3. 修改功能（同上）

下面直接上代码：

 <div class="header">
 			//头部
      <span class="logo">ToDoList</span>
     //keydown 键盘事件 按下enter直接添加 
      <input type="text"  v-model="inputstr" @keydown.enter="add"  placeholder="添加todo"
      />
    </div>

  <h1>正在进行({
   {
   nolist}})</h1>
       // 显示未完成的数量 
        <ul>
          <li v-for="(item,index) in list" :key="index" v-show="!item.isdone">
            //isdone 是动态添加的一个变量 用来判断todolist的完成态 
            <input type="checkbox" @click.prevent="handleClick(item)" />
         // 点击添加 
            <span class="content" @dblclick="updateIndex(item,index)" v-show="ifnum!=index">{
   {
   item.text}}</span>
            //ifnum是一个自定义变量 用来判断双击时内容的状态
           //双击内容修改 
            <input type="text" v-show="ifnum==index" v-model="item.text" @keydown