devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

（Vue案例）TodoList_vue todolist案例

作者：凡人多烦事01 | 2024-03-12 11:21:42

赞

踩

vue todolist案例

实现效果

 代码展示

main.js

  1. //引入vue
  2. import Vue from "vue";
  3. //引入组件App
  4. import App from "./App.vue";
  5.  
  6. //关闭vue的生产提示
  7. Vue.config.productionTip = false;
  8.  
  9. //创建vm
  10. new Vue({
  11.   el: "#app",
  12.   render: (h) => h(App),
  13. });

App.vue

  1. <template>
  2.   <div id="root">
  3.     <div class="todo-container">
  4.       <div class="todo-wrap">
  5.         <todo-head :addTodo="addTodo" />
  6.         <todo-list
  7.           :todoList="todoList"
  8.           :deleteTodo="deleteTodo"
  9.           :updateFlag="updateFlag"
  10.         />
  11.         <todo-fotter
  12.           :todoList="todoList"
  13.           :updateFlagAll="updateFlagAll"
  14.           :deleteFlagAll="deleteFlagAll"
  15.         />
  16.       </div>
  17.     </div>
  18.   </div>
  19. </template>
  20.  
  21. <script>
  22. import TodoList from "./components/todo-list.vue";
  23. import TodoHead from "./components/todo-head.vue";
  24. import TodoFotter from "./components/todo-fotter.vue";
  25. //引入组件
  26.  
  27. export default {
  28.   components: { TodoHead, TodoList, TodoFotter },
  29.   name: "App",
  30.   data() {
  31.     return {
  32.       todoList: [
  33.         { id: "001", name: "yb", flag: true },
  34.         { id: "002", name: "yg", flag: false },
  35.         { id: "003", name: "yf", flag: true },
  36.       ],
  37.     };
  38.   },
  39.   methods: {
  40.     //添加
  41.     addTodo(todo) {
  42.       this.todoList.unshift(todo); //在数组最前方添加
  43.     },
  44.     //删除
  45.     deleteTodo(id) {
  46.       //过滤出 不是要删除id的 所有值
  47.       this.todoList = this.todoList.filter((todo) => todo.id != id);
  48.     },
  49.     //删除全部已选的
  50.     deleteFlagAll() {
  51.       this.todoList = this.todoList.filter((todo) => todo.flag === false);
  52.     },
  53.     //修改指定事 是否完成
  54.     updateFlag(id) {
  55.       this.todoList.forEach((todo) => {
  56.         if (todo.id === id) todo.flag = !todo.flag;
  57.       });
  58.     },
  59.     //修改全部的 是否完成
  60.     updateFlagAll(flag) {
  61.       this.todoList.forEach((todo) => {
  62.         todo.flag = flag;
  63.       });
  64.     },
  65.     //删除指定的
  66.   },
  67. };
  68. </script>
  69.  
  70. <style>
  71. /*base*/
  72. body {
  73.   background: plum;
  74. }
  75. .btn {
  76.   display: inline-block;
  77.   padding: 4px 12px;
  78.   margin-bottom: 0;
  79.   font-size: 14px;
  80.   line-height: 20px;
  81.   text-align: center;
  82.   vertical-align: middle;
  83.   cursor: pointer;
  84.   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
  85.     0 1px 2px rgba(0, 0, 0, 0.05);
  86.   border-radius: 4px;
  87. }
  88.  
  89. .btn-danger {
  90.   color: #fff;
  91.   background-color: #da4f49;
  92.   border: 1px solid #bd362f;
  93. }
  94.  
  95. .btn-danger:hover {
  96.   color: #fff;
  97.   background-color: #bd362f;
  98. }
  99.  
  100. .btn:focus {
  101.   outline: none;
  102. }
  103.  
  104. .todo-container {
  105.   width: 600px;
  106.   margin: 0 auto;
  107. }
  108. .todo-container .todo-wrap {
  109.   padding: 10px;
  110.   border: 1px solid #ddd;
  111.   border-radius: 5px;
  112. }
  113. </style>

components里的 todo-head.vue

  1. <template>
  2.   <div class="todo-header">
  3.     <input
  4.       type="text"
  5.       placeholder="请输入你的任务名称，按回车键确认"
  6.       @keyup.enter="add"
  7.       v-model="todoName"
  8.     />
  9.   </div>
  10. </template>
  11.  
  12. <script scoped>
  13. //引入nanoid
  14. import { nanoid } from "nanoid";
  15. export default {
  16.   props: ["addTodo"],
  17.   data() {
  18.     return {
  19.       todoName: "",
  20.     };
  21.   },
  22.   methods: {
  23.     add() {
  24.       //去除前后空格判断不为空 进行添加
  25.       if (this.todoName.trim() != "" && this.todoName.trim() != null) {
  26.         const todo = { id: nanoid(), name: this.todoName, flag: false };
  27.         this.addTodo(todo);
  28.         this.todoName = "";
  29.       }
  30.     },
  31.   },
  32. };
  33. </script>
  34.  
  35. <style>
  36. /*header*/
  37. .todo-header input {
  38.   width: 560px;
  39.   height: 28px;
  40.   font-size: 14px;
  41.   border: 1px solid #ccc;
  42.   border-radius: 4px;
  43.   padding: 4px 7px;
  44. }
  45.  
  46. .todo-header input:focus {
  47.   outline: none;
  48.   border-color: rgba(82, 168, 236, 0.8);
  49.   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
  50.     0 0 8px rgba(82, 168, 236, 0.6);
  51. }
  52. </style>

components里的todo-list.vue

  1. <template>
  2.   <ul class="todo-main">
  3.     <todo-item
  4.       v-for="todo in todoList"
  5.       :key="todo.id"
  6.       :todo="todo"
  7.       :deleteTodo="deleteTodo"
  8.       :updateFlag="updateFlag"
  9.     />
  10.   </ul>
  11. </template>
  12.  
  13. <script>
  14. import todoItem from "./todo-item.vue";
  15. export default {
  16.   components: { todoItem },
  17.   props: ["todoList", "deleteTodo", "updateFlag"],
  18. };
  19. </script>
  20.  
  21. <style scoped>
  22. /*main*/
  23. .todo-main {
  24.   margin-left: 0px;
  25.   border: 1px solid #ddd;
  26.   border-radius: 2px;
  27.   padding: 0px;
  28. }
  29.  
  30. .todo-empty {
  31.   height: 40px;
  32.   line-height: 40px;
  33.   border: 1px solid #ddd;
  34.   border-radius: 2px;
  35.   padding-left: 5px;
  36.   margin-top: 10px;
  37. }
  38. </style>

components里的 todo-Item.vue

  1. <template>
  2.   <li>
  3.     <label>
  4.       <!-- change:元素发生修改时调用 -->
  5.       <input type="checkbox" :checked="todo.flag" @change="upd(todo.id)" />
  6.       <span>{{ todo.name }}</span>
  7.     </label>
  8.     <button class="btn btn-danger" @click="del(todo.id)">删除</button>
  9.   </li>
  10. </template>
  11.  
  12. <script>
  13. export default {
  14.   props: ["todo", "deleteTodo", "updateFlag"],
  15.   methods: {
  16.     del(id) {
  17.       this.deleteTodo(id);
  18.     },
  19.     upd(id) {
  20.       this.updateFlag(id);
  21.     },
  22.   },
  23. };
  24. </script>
  25.  
  26. <style scoped>
  27. /*item*/
  28. li {
  29.   list-style: none;
  30.   height: 36px;
  31.   line-height: 36px;
  32.   padding: 0 5px;
  33.   border-bottom: 1px solid #ddd;
  34. }
  35.  
  36. li label {
  37.   float: left;
  38.   cursor: pointer;
  39. }
  40.  
  41. li label li input {
  42.   vertical-align: middle;
  43.   margin-right: 6px;
  44.   position: relative;
  45.   top: -1px;
  46. }
  47.  
  48. li button {
  49.   float: right;
  50.   display: none;
  51.   margin-top: 3px;
  52. }
  53.  
  54. li:before {
  55.   content: initial;
  56. }
  57.  
  58. li:last-child {
  59.   border-bottom: none;
  60. }
  61. li:hover {
  62.   background-color: pink;
  63. }
  64. li:hover button {
  65.   display: block;
  66. }
  67. </style>

components 里的 todo-fotter.vue

  1. <template>
  2.   <div class="todo-footer" v-show="allNUm">
  3.     <label>
  4.       <input type="checkbox" v-model="flag" />
  5.     </label>
  6.     <span>
  7.       <span>已完成{{ trueNum }}</span> / 全部{{ allNUm }}
  8.     </span>
  9.     <button class="btn btn-danger" @click="delFlagAll">清除已完成任务</button>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14. export default {
  15.   props: ["todoList", "updateFlagAll", "deleteFlagAll"],
  16.   methods: {
  17.     delFlagAll() {
  18.       this.deleteFlagAll();
  19.     },
  20.   },
  21.   computed: {
  22.     allNUm() {
  23.       return this.todoList.length;
  24.     },
  25.     trueNum() {
  26.       /* reduce 根据数组的长度 执行几次
  27.       returnValue 每次的返回值
  28.       todo 每次的实例
  29.       0 初始值 */
  30.       return this.todoList.reduce(
  31.         (returnValue, todo) => returnValue + (todo.flag ? 1 : 0),
  32.         0
  33.       );
  34.     },
  35.     flag: {
  36.       get() {
  37.         //如果 已完成的数量 === 全部数量 默认全选
  38.         return this.trueNum === this.allNUm && this.trueNum > 0;
  39.       },
  40.       set(value) {
  41.         //value获取当前多选框的状态  勾选 true 不勾选 false
  42.         this.updateFlagAll(value);
  43.       },
  44.     },
  45.   },
  46. };
  47. </script>
  48.  
  49. <style scoped>
  50. /*footer*/
  51. .todo-footer {
  52.   height: 40px;
  53.   line-height: 40px;
  54.   padding-left: 6px;
  55.   margin-top: 5px;
  56. }
  57.  
  58. .todo-footer label {
  59.   display: inline-block;
  60.   margin-right: 20px;
  61.   cursor: pointer;
  62. }
  63.  
  64. .todo-footer label input {
  65.   position: relative;
  66.   top: -1px;
  67.   vertical-align: middle;
  68.   margin-right: 5px;
  69. }
  70.  
  71. .todo-footer button {
  72.   float: right;
  73.   margin-top: 5px;
  74. }
  75. </style>

总结 

  1. 1、组件化编码流程：
  2.         (1)、拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
  3.         (2)、实现动态组件：考虑好数据的存放位置，数据是一个在用，还是一堆组件再用
  4.             1)、一个组件在用：放在组件自身即可。
  5.             2)、一些组件在用：放在他们共同的父组件上(状态提升)
  6.         (3)、实现交互：从绑定事件开始。
  7.     2、props适用于：
  8.         (1)、父组件 ===> 子组件 通信   (父组件创建一个函数 写点方法 让子组件传入参数调用实现功能)
  9.         (2)、子组件 ===> 父组件 通信 （要求父组件传过来一个函数 再通过上方的说明实现）
  10.  
  11.     3、使用v-model 时要切记：v-model 绑定的值不能是 props传过来的值，因为props是 不可以修改的！
  12.     4、props传过来的若是对象类型的值，修改对象的属性时Vue不会报错 会提示破浪线 可以运行，但不推荐使用

更新

TodoList_本地存储

App.vue

  1.   data() {
  2.     return {
  3.       //获取存储
  4.       todoList: localStorage.getItem("todos") || [],
  5.     };
  6.   },
  7.  
  8.  
  9.   watch: {
  10.     todoList: {
  11.       deep: true, //开启深度监视
  12.       handler(value) {
  13.         //这里获取的 value 是todoList 被修改后的值
  14.         localStorage.setItem("todos", JSON.stringify(value)); //把值转为json格式字符串
  15.       },
  16.     },
  17.   },

TodoList_自定义事件

App.vue

  1. <template>
  2.   <div id="root">
  3.     <div class="todo-container">
  4.       <div class="todo-wrap">
  5.         <todo-head @addTodo="addTodo" />
  6.         <todo-list
  7.           :todoList="todoList"
  8.           :deleteTodo="deleteTodo"
  9.           :updateFlag="updateFlag"
  10.         />
  11.         <todo-fotter
  12.           :todoList="todoList"
  13.           @updateFlagAll="updateFlagAll"
  14.           @deleteFlagAll="deleteFlagAll"
  15.         />
  16.       </div>
  17.     </div>
  18.   </div>
  19. </template>
  20.  
  21. //给底部组件标签绑定两个自定义事件    @updateFlagAll     @deleteFlagAll

 todo-fotter.vue

  1. <template>
  2.   <div class="todo-footer" v-show="allNUm">
  3.     <label>
  4.       <input type="checkbox" v-model="flag" />
  5.     </label>
  6.     <span>
  7.       <span>已完成{{ trueNum }}</span> / 全部{{ allNUm }}
  8.     </span>
  9.     <button class="btn btn-danger" @click="delFlagAll">清除已完成任务</button>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14. export default {
  15.   props: ["todoList"],
  16.   methods: {
  17.     delFlagAll() {
  18.       //this.deleteFlagAll();
  19.       this.$emit("deleteFlagAll");
  20.     },
  21.   },
  22.   computed: {
  23.     allNUm() {
  24.       return this.todoList.length;
  25.     },
  26.     trueNum() {
  27.       /* reduce 根据数组的长度 执行几次
  28.       returnValue 每次的返回值
  29.       todo 每次的实例
  30.       0 初始值 */
  31.       return this.todoList.reduce(
  32.         (returnValue, todo) => returnValue + (todo.flag ? 1 : 0),
  33.         0
  34.       );
  35.     },
  36.     flag: {
  37.       get() {
  38.         //如果 已完成的数量 === 全部数量 默认全选
  39.         return this.trueNum === this.allNUm && this.trueNum > 0;
  40.       },
  41.       set(value) {
  42.         //value获取当前多选框的状态  勾选 true 不勾选 false
  43.         //this.updateFlagAll(value);
  44.         this.$emit("updateFlagAll", value);
  45.       },
  46.     },
  47.   },
  48. };
  49. </script>
  50.  
  51. <style scoped>
  52. /*footer*/
  53. .todo-footer {
  54.   height: 40px;
  55.   line-height: 40px;
  56.   padding-left: 6px;
  57.   margin-top: 5px;
  58. }
  59.  
  60. .todo-footer label {
  61.   display: inline-block;
  62.   margin-right: 20px;
  63.   cursor: pointer;
  64. }
  65.  
  66. .todo-footer label input {
  67.   position: relative;
  68.   top: -1px;
  69.   vertical-align: middle;
  70.   margin-right: 5px;
  71. }
  72.  
  73. .todo-footer button {
  74.   float: right;
  75.   margin-top: 5px;
  76. }
  77. </style>

TodoList_事件总线

main.js

  1. //引入vue
  2. import Vue from "vue";
  3. //引入组件App
  4. import App from "./App.vue";
  5.  
  6. //关闭vue的生产提示
  7. Vue.config.productionTip = false;
  8.  
  9. //创建vm
  10. new Vue({
  11.   el: "#app",
  12.   render: (h) => h(App),
  13.   beforeCreate() {
  14.     Vue.prototype.$bus = this; //设置全局事件总线
  15.   },
  16. });

App.vue

  1. <template>
  2.   <div id="root">
  3.     <div class="todo-container">
  4.       <div class="todo-wrap">
  5.         <todo-head @addTodo="addTodo" />
  6.         <todo-list :todoList="todoList" />
  7.         <todo-fotter
  8.           :todoList="todoList"
  9.           @updateFlagAll="updateFlagAll"
  10.           @deleteFlagAll="deleteFlagAll"
  11.         />
  12.       </div>
  13.     </div>
  14.   </div>
  15. </template>
  16.  
  17. <script>
  18. import TodoList from "./components/todo-list.vue";
  19. import TodoHead from "./components/todo-head.vue";
  20. import TodoFotter from "./components/todo-fotter.vue";
  21. //引入组件
  22.  
  23. export default {
  24.   components: { TodoHead, TodoList, TodoFotter },
  25.   name: "App",
  26.   data() {
  27.     return {
  28.       //获取存储 使用JSON把字符解析成对象
  29.       todoList: JSON.parse(localStorage.getItem("todos")) || [],
  30.     };
  31.   },
  32.   methods: {
  33.     //添加
  34.     addTodo(todo) {
  35.       this.todoList.unshift(todo); //在数组最前方添加u
  36.     },
  37.     //删除
  38.     deleteTodo(id) {
  39.       //过滤出 不是要删除id的 所有值
  40.       this.todoList = this.todoList.filter((todo) => todo.id != id);
  41.     },
  42.     //删除全部已选的
  43.     deleteFlagAll() {
  44.       this.todoList = this.todoList.filter((todo) => todo.flag === false);
  45.     },
  46.     //修改指定事 是否完成
  47.     updateFlag(id) {
  48.       this.todoList.forEach((todo) => {
  49.         if (todo.id === id) todo.flag = !todo.flag;
  50.       });
  51.     },
  52.     //修改全部的 是否完成
  53.     updateFlagAll(flag) {
  54.       this.todoList.forEach((todo) => {
  55.         todo.flag = flag;
  56.       });
  57.     },
  58.     //删除指定的g
  59.   },
  60.   mounted() {
  61.     this.$bus.$on("deleteTodo", this.deleteTodo); //gei$bus设置自定义事件
  62.     this.$bus.$on("updateFlag", this.updateFlag);
  63.   },
  64.   beforeDestroy() {
  65.     this.$bus.$off("deleteTodo", "updateFlag");
  66.   },
  67.   watch: {
  68.     todoList: {
  69.       deep: true, //开启深度监视
  70.       handler(value) {
  71.         //这里获取的 value 是todoList 被修改后的值
  72.         localStorage.setItem("todos", JSON.stringify(value)); //把值转为json格式字符串
  73.       },
  74.     },
  75.   },
  76. };
  77. </script>
  78.  
  79. <style>
  80. /*base*/
  81. body {
  82.   background: plum;
  83. }
  84. .btn {
  85.   display: inline-block;
  86.   padding: 4px 12px;
  87.   margin-bottom: 0;
  88.   font-size: 14px;
  89.   line-height: 20px;
  90.   text-align: center;
  91.   vertical-align: middle;
  92.   cursor: pointer;
  93.   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
  94.     0 1px 2px rgba(0, 0, 0, 0.05);
  95.   border-radius: 4px;
  96. }
  97.  
  98. .btn-danger {
  99.   color: #fff;
  100.   background-color: #da4f49;
  101.   border: 1px solid #bd362f;
  102. }
  103.  
  104. .btn-danger:hover {
  105.   color: #fff;
  106.   background-color: #bd362f;
  107. }
  108.  
  109. .btn:focus {
  110.   outline: none;
  111. }
  112.  
  113. .todo-container {
  114.   width: 600px;
  115.   margin: 0 auto;
  116. }
  117. .todo-container .todo-wrap {
  118.   padding: 10px;
  119.   border: 1px solid #ddd;
  120.   border-radius: 5px;
  121. }
  122. </style>

todo-list.vue

  1. <template>
  2.   <ul class="todo-main">
  3.     <todo-item v-for="todo in todoList" :key="todo.id" :todo="todo" />
  4.   </ul>
  5. </template>
  6.  
  7. props: ["todoList"],

todo-item.vue

  1. <template>
  2.   <li>
  3.     <label>
  4.       <!-- change:元素发生修改时调用 -->
  5.       <input type="checkbox" :checked="todo.flag" @change="upd(todo.id)" />
  6.       <span>{{ todo.name }}</span>
  7.     </label>
  8.     <button class="btn btn-danger" @click="del(todo.id)">删除</button>
  9.   </li>
  10. </template>
  11.  
  12. <script>
  13. export default {
  14.   props: ["todo"],
  15.   methods: {
  16.     del(id) {
  17.       //this.deleteTodo(id);
  18.       if (confirm("确认删除")) {
  19.         this.$bus.$emit("deleteTodo", id);
  20.       }
  21.     },
  22.     upd(id) {
  23.       //this.updateFlag(id);
  24.       this.$bus.$emit("updateFlag", id);
  25.     },
  26.   },
  27. };
  28. </script>
  29.  
  30. <style scoped>
  31. /*item*/
  32. li {
  33.   list-style: none;
  34.   height: 36px;
  35.   line-height: 36px;
  36.   padding: 0 5px;
  37.   border-bottom: 1px solid #ddd;
  38. }
  39.  
  40. li label {
  41.   float: left;
  42.   cursor: pointer;
  43. }
  44.  
  45. li label li input {
  46.   vertical-align: middle;
  47.   margin-right: 6px;
  48.   position: relative;
  49.   top: -1px;
  50. }
  51.  
  52. li button {
  53.   float: right;
  54.   display: none;
  55.   margin-top: 3px;
  56. }
  57.  
  58. li:before {
  59.   content: initial;
  60. }
  61.  
  62. li:last-child {
  63.   border-bottom: none;
  64. }
  65. li:hover {
  66.   background-color: pink;
  67. }
  68. li:hover button {
  69.   display: block;
  70. }
  71. </style>

TodoList_消息订阅于发布

       下载包

        全装 pubsub.js(消息发布与订阅库) 

 npm i pubsub-js

引入包 

  1. //引入订阅消息与发布库
  2. import pubsub from "pubsub-js";

App.vue

  1.   mounted() {
  2.     this.pubId = pubsub.subscribe("deleteTodo", this.deleteTodo); //设置消息订阅
  3.     this.$bus.$on("updateFlag", this.updateFlag);
  4.   },

todo-item.vue

  1.     del(id) {
  2.       if (confirm("确认删除")) {
  3.         //this.deleteTodo(id);
  4.         //this.$bus.$emit("deleteTodo", id);
  5.         pubsub.publish("deleteTodo", id); //发送消息
  6.       }
  7.     },

TodoList_nextTick

todo-item.vue

  1. <template>
  2.   <li>
  3.     <label>
  4.       <!-- change:元素发生修改时调用 -->
  5.       <input type="checkbox" :checked="todo.flag" @change="upd(todo.id)" />
  6.       <span v-show="!todo.isEdit">{{ todo.name }}</span>
  7.       <input
  8.         type="text"
  9.         :value="todo.name"
  10.         v-show="todo.isEdit"
  11.         @blur="nameBlur($event, todo)"
  12.         ref="inputFocus"
  13.       />
  14.     </label>
  15.     <button class="btn btn-danger" @click="del(todo.id)">删除</button>
  16.     <button v-show="!todo.isEdit" class="btn btn-edit" @click="updName(todo)">
  17.       编辑
  18.     </button>
  19.   </li>
  20. </template>
  21.  
  22. <script>
  23. //引入订阅消息与发布库
  24. import pubsub from "pubsub-js";
  25. export default {
  26.   props: ["todo"],
  27.   methods: {
  28.     del(id) {
  29.       //this.deleteTodo(id);
  30.       if (confirm("确认删除")) {
  31.         //this.$bus.$emit("deleteTodo", id);
  32.         pubsub.publish("deleteTodo", id);
  33.       }
  34.     },
  35.     upd(id) {
  36.       //this.updateFlag(id);
  37.       this.$bus.$emit("updateFlag", id);
  38.     },
  39.     updName(todo) {
  40.       if ("isEdit" in todo) {
  41.         //判断该对象 有没有 isEdit属性
  42.         todo.isEdit = true;
  43.       } else {
  44.         console.log("@");
  45.         this.$set(todo, "isEdit", true);
  46.       }
  47.       // $nextTick() 会在模板解析下一次执行里面的函数
  48.       this.$nextTick(() => this.$refs.inputFocus.focus());
  49.     },
  50.     nameBlur(event, todo) {
  51.       todo.isEdit = false;
  52.       if (!event.target.value.trim()) return alert("不能为空");
  53.       //字符  有值的时候 返回的是 true 没有返回 false
  54.       this.$bus.$emit("updateName", todo.id, event.target.value);
  55.     },
  56.   },
  57. };
  58. </script>
  59.  
  60. <style scoped>
  61. /*item*/
  62. li {
  63.   list-style: none;
  64.   height: 36px;
  65.   line-height: 36px;
  66.   padding: 0 5px;
  67.   border-bottom: 1px solid #ddd;
  68. }
  69.  
  70. li label {
  71.   float: left;
  72.   cursor: pointer;
  73. }
  74.  
  75. li label li input {
  76.   vertical-align: middle;
  77.   margin-right: 6px;
  78.   position: relative;
  79.   top: -1px;
  80. }
  81.  
  82. li button {
  83.   float: right;
  84.   display: none;
  85.   margin-top: 3px;
  86. }
  87.  
  88. li:before {
  89.   content: initial;
  90. }
  91.  
  92. li:last-child {
  93.   border-bottom: none;
  94. }
  95. li:hover {
  96.   background-color: pink;
  97. }
  98. li:hover button {
  99.   display: block;
  100. }
  101. </style>

TodoList_动画

todo-list.vue

  1. <template>
  2.   <!-- 普通的动画 -->
  3.   <!-- <ul class="todo-main">
  4.     <transition-group name="todo" appear>
  5.       <todo-item v-for="todo in todoList" :key="todo.id" :todo="todo" />
  6.     </transition-group>
  7.   </ul> -->
  8.   <!-- 第三方库动画 -->
  9.   <ul class="todo-main">
  10.     <transition-group
  11.       name="animate__animated animate__bounce"
  12.       appear
  13.       enter-active-class="animate__bounce"
  14.       leave-active-class="animate__backOutDown"
  15.     >
  16.       <todo-item v-for="todo in todoList" :key="todo.id" :todo="todo" />
  17.     </transition-group>
  18.   </ul>
  19. </template>
  20.  
  21. <script>
  22. //引入
  23. import "animate.css";
  24. import todoItem from "./todo-item.vue";
  25. export default {
  26.   components: { todoItem },
  27.   props: ["todoList"],
  28. };
  29. </script>
  30.  
  31. <style scoped>
  32. /*main*/
  33. .todo-main {
  34.   margin-left: 0px;
  35.   border: 1px solid #ddd;
  36.   border-radius: 2px;
  37.   padding: 0px;
  38. }
  39.  
  40. .todo-empty {
  41.   height: 40px;
  42.   line-height: 40px;
  43.   border: 1px solid #ddd;
  44.   border-radius: 2px;
  45.   padding-left: 5px;
  46.   margin-top: 10px;
  47. }
  48.  
  49. /* 普通的动画 */
  50. /* .todo-enter-active {
  51.   animation: goto 1s linear;
  52. }
  53. .todo-leave-active {
  54.   animation: goto 1s linear reverse;
  55. }
  57. @keyframes goto {
  58.   from {
  59.     transform: translateX(-100%);
  60.   }
  61.   to {
  62.     transform: translateX(0%);
  63.   }
  64. } */
  65. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/223846
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号