【vue3】一个简易的TodoList

741 阅读1分钟

基于vue3的composition api,使用了vuex,element3;

布局参考了: todomvc.com/examples/vu…

element3: element3-ui.com/#/

实现的功能:

  1. 可以通过输入框输入一个 todo,按下回车即可完成一个输入
  2. todo-item
    1. 名称
      1. 为输入框输入的内容
      2. 删除按钮
        1. 点击后,删除当前 todo
      3. 完成按钮
        1. 点击后,当前 todo 的样式画个横线
  3. all 按钮,显示所有 todo
  4. active 按钮,显示所有处于 active 状态下的所有 todo
  5. completed 按钮,显示所有处于 completed 状态下的所有 todo

效果展示:

github地址: github.com/duanlvxin/V…