Vue中实现Todolist（适合新手）

实现效果图


实现功能

1. 在input输入要输入的内容 回车（enter）后把内容添加到未完成中
2. 动态计算有几个未完成的任务
3. 点击未完成的复选框到已经完成中 点击已完成的复选框回到未完成
4. 双击列表中的内容，可对列表内容进行编辑 在编辑完成后，按回车enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取消编辑 还是之前的值
5. 已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（本地存储）

input输入区域

 <!-- 头部 -->
    <header>
      <!-- 头部内容 -->
      <div class="todolist">
        <div>ToDoList</div>
        <div>
          <input type="text" placeholder="添加ToDo" v-model="inputValue" @keydown.enter="submit" />
        </div>
      </div>
    </header>
1
2
3
4
5
6
7
8
9
10

已完成未完成区域

<!-- 留言内容 -->
    <div class="todolist_item">
      <!-- 未完成 -->
      <div class="todolist_item_no">
        <div>正在进行</div>
        <div>({{noList}})</div>
      </div>
      <ul class="todolist_item_text">
        <li v-for="(item,index) in ToDoList" :key="index" v-show="!item.switch">
          <!-- 复选框 -->
          <input type="checkbox" @click.prevent="checked(item,true)" />
          <!-- 双击出现input -->
          <span v-if="index !=Listindex" @dblclick="updata(item,index)">{{item.val}}</span>
          <input
            type="text"
            v-if="index ==Listindex"
            @keydown.enter="seveData"
            v-model="item.val"
            @blur="seveData"
            @keydown.esc="saveList(item)"
          />
          <button class="todolist_button" @click="deletd(index)">删除</button>
        </li>
      </ul>

      <!-- 已完成 -->
      <div class="todolist_item_no">
        <div>已经完成</div>
        <div>({{yesList}})</div>
      </div>
      <ul class="todolist_item_text">
        <li v-for="(item,index) in ToDoList" :key="index" v-show="item.switch">
          <!-- 复选框 -->
          <input type="checkbox" checked @click.prevent="checked(item,false)" />
          <!-- 双击出现input -->
          <span v-if="index !=Listindex" @dblclick="updata(item,index)">{{item.val}}</span>
          <input
            type="text"
            v-if="index ==Listindex"
            @keydown.enter="seveData"
            v-model="item.val"
            @blur="seveData"
            @keydown.esc="saveList(item)"
          />
          <button class="todolist_button" @click="deletd(index)">删除</button>
        </li>
      </ul>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

操作方法事件 js代码部分

<script>
export default {
  data() {
    return {
      inputValue: "", //input中的值
      ToDoList: [],  //放input中的值
      Listindex: -1, //防止点击input显示两个
      saveToList: "" //esc之后值还是之前的
    };
  },
  created() {
    if (localStorage.ToDoList !== undefined) {
      this.ToDoList = JSON.parse(localStorage.ToDoList);
    }
  },
  computed: {
    noList() {
      let count = 0;
      this.ToDoList.map(a => {
        if (!a.switch) {
          count++;
        }
      });
      return count;
    },
    yesList() {
      let count = 0;
      this.ToDoList.map(a => {
        if (a.switch) {
          count++;
        }
      });
      return count
    }
  },
  // 定义属性和方法
  methods: {
    submit() {
      this.ToDoList.push({
        val: this.inputValue,
        switch: false
      });
      this.inputValue = "";
      this.save();
    },
    // 复选框
    checked(item, check) {
      if (check) {
        item.switch = true;
      } else {
        item.switch = false;
      }
      this.save();
    },
    // 删除
    deletd(index) {
      this.ToDoList.splice(index, 1);
      this.save();
    },
    // 双击显示input
    updata(item, index) {
      // esc后
      this.saveToList = item.val;

      this.Listindex = index;
    },
    // 回车改变值
    seveData() {
      this.save();
      // 回车后变成没有要修改的
      this.Listindex = -1;
    },
    // esc键输入的值不修改
    saveList(item) {
      item.val = this.saveToList;
      this.save();
      // 变成没有要修改的
      this.Listindex = -1;
    },
    // 封装本地同步方法
    save() {
      localStorage.ToDoList = JSON.stringify(this.ToDoList);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

css部分自己写吧哈哈哈哈哈哈哈哈