基于vue实现待办清单案例

最新推荐文章于 2024-04-29 21:35:15 发布
最新推荐文章于 2024-04-29 21:35:15 发布
阅读量1k 收藏 23
点赞数 14
分类专栏： vue 文章标签： vue.js javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CAUC_lin/article/details/135896602
版权

一、需求

  • 新增内容；

  • 删除内容；

  • 统计操作；

  • 清空数据。

    示例图：

    在这里插入图片描述

二、代码演示

1、基础准备

  1. index.css代码

    html,
body {
 margin: 0;
 padding: 0;
}
body {
 background: #fff ;
}
button {
 margin: 0;
 padding: 0;
 border: 0;
 background: none;
 font-size: 100%;
 vertical-align: baseline;
 font-family: inherit;
 font-weight: inherit;
 color: inherit;
 -webkit-appearance: none;
 appearance: none;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

body {
 font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
 line-height: 1.4em;
 background: #f1b7b7;
 color: #4d4d4d;
 min-width: 230px;
 max-width: 550px;
 margin: 0 auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-weight: 300;
}

:focus {
 outline: 0;
}

.hidden {
 display: none;
}

#app {
 background: #fff;
 margin: 180px 0 40px 0;
 position: relative;
 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#app input::-webkit-input-placeholder {
 font-style: italic;
 font-weight: 300;
 color: #e6e6e6;
}

#app input::-moz-placeholder {
 font-style: italic;
 font-weight: 300;
 color: #e6e6e6;
}

#app input::input-placeholder {
 font-style: italic;
 font-weight: 300;
 color: gray;
}

#app h1 {
 position: absolute;
 top: -160px;
 width: 100%;
 font-size: 60px;
 font-weight: 100;
 text-align: center;
 color: rgba(175, 47, 47, .8);
 -webkit-text-rendering: optimizeLegibility;
 -moz-text-rendering: optimizeLegibility;
 text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
 position: relative;
 margin: 0;
 width: 100%;
 font-size: 24px;
 font-family: inherit;
 font-weight: inherit;
 line-height: 1.4em;
 border: 0;
 color: inherit;
 padding: 6px;
 border: 1px solid #999;
 box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.new-todo {
 padding: 16px;
 border: none;
 background: rgba(0, 0, 0, 0.003);
 box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
 position: relative;
 z-index: 2;
 border-top: 1px solid #e6e6e6;
}

.toggle-all {
 width: 1px;
 height: 1px;
 border: none; /* Mobile Safari */
 opacity: 0;
 position: absolute;
 right: 100%;
 bottom: 100%;
}

.toggle-all + label {
 width: 60px;
 height: 34px;
 font-size: 0;
 position: absolute;
 top: -52px;
 left: -13px;
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
}

.toggle-all + label:before {
 content: "❯";
 font-size: 22px;
 color: #e6e6e6;
 padding: 10px 27px 10px 27px;
}

.toggle-all:checked + label:before {
 color: #737373;
}

.listview {
 margin: 0;
 padding: 0;
 list-style: none;
 max-height: 420px;
 overflow: auto;
}

.listview li {
 position: relative;
 font-size: 24px;
 border-bottom: 1px solid #ededed;
 height: 60px;
 box-sizing: border-box;
}

.listview li:last-child {
 border-bottom: none;
}

.listview .view .index {
 position: absolute;
 color: gray;
 left: 10px;
 top: 20px;
 font-size: 16px;
}

.listview li .toggle {
 text-align: center;
 width: 40px;
 /* auto, since non-WebKit browsers doesn't support input styling */
 height: auto;
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 border: none; /* Mobile Safari */
 -webkit-appearance: none;
 appearance: none;
}

.listview li .toggle {
 opacity: 0;
}

.listview li .toggle + label {
 /*
	Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
	IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
*/
 background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: center left;
}

.listview li .toggle:checked + label {
 background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}

.listview li label {
 word-break: break-all;
 padding: 15px 15px 15px 60px;
 display: block;
 line-height: 1.2;
 transition: color 0.4s;
}

.listview li.completed label {
 color: #d9d9d9;
 text-decoration: line-through;
}

.listview li .destroy {
 display: none;
 position: absolute;
 top: 0;
 right: 10px;
 bottom: 0;
 width: 40px;
 height: 40px;
 margin: auto 0;
 font-size: 30px;
 color: #cc9a9a;
 margin-bottom: 11px;
 transition: color 0.2s ease-out;
}

.listview li .destroy:hover {
 color: #af5b5e;
}

.listview li .destroy:after {
 content: "×";
}

.listview li:hover .destroy {
 display: block;
}

.listview li .edit {
 display: none;
}

.listview li.editing:last-child {
 margin-bottom: -1px;
}

.footer {
 color: #777;
 padding: 10px 15px;
 height: 20px;
 text-align: center;
 border-top: 1px solid #e6e6e6;
}

.footer:before {
 content: "";
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
 height: 50px;
 overflow: hidden;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
   0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
   0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
 float: left;
 text-align: left;
}

.todo-count strong {
 font-weight: 300;
}

.filters {
 margin: 0;
 padding: 0;
 list-style: none;
 position: absolute;
 right: 0;
 left: 0;
}

.filters li {
 display: inline;
}

.filters li a {
 color: inherit;
 margin: 3px;
 padding: 3px 7px;
 text-decoration: none;
 border: 1px solid transparent;
 border-radius: 3px;
}

.filters li a:hover {
 border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
 border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
 float: right;
 position: relative;
 line-height: 20px;
 text-decoration: none;
 cursor: pointer;
}

.clear-completed:hover {
 text-decoration: underline;
}

.info {
 margin: 50px auto 0;
 color: #bfbfbf;
 font-size: 15px;
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 text-align: center;
}

.info p {
 line-height: 1;
}

.info a {
 color: inherit;
 text-decoration: none;
 font-weight: 400;
}

.info a:hover {
 text-decoration: underline;
}

/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
 .toggle-all,
 .listview li .toggle {
   background: none;
 }

 .listview li .toggle {
   height: 40px;
 }
}

@media (max-width: 430px) {
 .footer {
   height: 50px;
 }

 .filters {
   bottom: 10px;
 }
}

  2. 模板代码

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>待办清单list</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>

  <body>
    <!-- VUE示例接管区域 -->
    <section id="app">
      <!-- 输入框 -->
      <header class="header">
        <h1>待办清单</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="输入日程"
          class="new-todo"
        />
      </header>

      <!-- 列表区域 -->
      <section class="main">
        <ul class="listview">
          <li class="todo">
            <div class="view">
              <span class="index">1.</span> <label>待办事项1</label>
              <button class="destroy"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"> <strong>1</strong> items left </span>
        <button class="clear-completed">Clear</button>
      </footer>
    </section>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>
</html>

2、新增功能

  1. 实现步骤

    • 生成列表结构(v-for 数组)
    • 获取用户输入(v-model 双向绑定)
    • 回车,新增数据(v-on .enter事件修饰符)
    • 页面布局不熟悉,可以通过审查元素的方式快速找到元素

  2. 修改js代码

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>待办清单list</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>

  <body>
    <!-- VUE示例接管区域 -->
    <section id="app">
      <!-- 输入框 -->
      <header class="header">
        <h1>待办清单</h1>

        <!-- 添加 数据绑定 和 回车添加进model数据列表的事件绑定-->
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="输入日程"
          class="new-todo"
          v-model="inputValue"
          @keyup.enter="add"
        />
      </header>

      <!-- 列表区域 -->
      <section class="main">
        <ul class="listview">
          <!-- 添加循环 -->
          <li v-for="(item, index) in todoList" class="todo">
            <div class="view">
              <span class="index">{{index+1}}.</span> <label>{{item}}</label>
              <button class="destroy"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"> <strong>1</strong> items left </span>
        <button class="clear-completed">Clear</button>
      </footer>
    </section>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>

  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        inputValue: "待输入待办事项",
        todoList: ["事件1", "事件2"],
      },
      methods: {
        add: function () {
          this.todoList.push(this.inputValue);
        },
      },
    });
  </script>
</html>

  3. 测试结果

在这里插入图片描述

3、删除内容

  1. 步骤

    • 点击删除指定的内容( 根据索引删除元素)
    • 在methods中添加一个删除的方法,使用splice函数进行删除

  2. 代码修改

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入css资源 -->
    <link rel="stylesheet" href="./css/inputNum.css" />
  </head>
  <body>
    <!-- 显示区域 -->
    <div id="app">
      <input type="button" class="btn btn_plus" @click="add" />
      <span>{{num}}</span>
      <input type="button" class="btn btn_minus" @click="sub" />
    </div>
  </body>

  <script src="js/vue.min.js"></script>
  <script>
    var Vm = new Vue({
      el: "#app",
      data: {
        num: 1,
      },
      methods: {
        add: function () {
          if (this.num < 10) {
            this.num++;
          } else {
            alert("数字到达上限10！");
          }
        },
        sub: function () {
          if (this.num > 0) {
            this.num--;
          } else {
            alert("数字减到下限0！");
          }
        },
      },
    });
  </script>
</html>

  3. 测试结果

    在这里插入图片描述

    点击即可删除。

4、统计操作

  1. 步骤

    • 统计页面信息的个数,就是列表中的元素的个数.
    • 获取 list数组的长度,就是信息的个数

  2. 修改代码

    <html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <title>待办清单list</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta name="robots" content="noindex, nofollow" />
   <meta name="googlebot" content="noindex, nofollow" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" type="text/css" href="./css/index.css" />
 </head>

 <body>
   <!-- VUE示例接管区域 -->
   <section id="app">
     <!-- 输入框 -->
     <header class="header">
       <h1>待办清单</h1>

       <!-- 添加 数据绑定 和 回车添加进model数据列表的事件绑定-->
       <input
         autofocus="autofocus"
         autocomplete="off"
         placeholder="输入日程"
         class="new-todo"
         v-model="inputValue"
         @keyup.enter="add"
       />
     </header>

     <!-- 列表区域 -->
     <section class="main">
       <ul class="listview">
         <!-- 添加循环 -->
         <li v-for="(item, index) in todoList" class="todo">
           <div class="view">
             <span class="index">{{index+1}}.</span> <label>{{item}}</label>
             <!-- 删除按钮 -->
             <button class="destroy" @click="remove(index)"></button>
           </div>
         </li>
       </ul>
     </section>
     <!-- 统计和清空 -->
     <footer class="footer">
       <span class="todo-count">
          <!-- 此处添加数据的统计信息 -->
         <strong>{{todoList.length}}</strong> items left
       </span>
       <button class="clear-completed">Clear</button>
     </footer>
   </section>

   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </body>

 <script src="./js/vue.min.js"></script>
 <script>
   var VM = new Vue({
     el: "#app",
     data: {
       inputValue: "待输入待办事项",
       todoList: ["事件1", "事件2"],
     },
     methods: {
       add: function () {
         this.todoList.push(this.inputValue);
       },
       //删除方法
       remove: function (index) {
         //使用splice(元素索引,删除几个) 根据索引删除
         //双向绑定数据，均只需要操作数据即可
         this.todoList.splice(index, 1);
       },
     },
   });
 </script>
</html>

  3. 测试结果

    在这里插入图片描述

5、清空数据

  1. 步骤

    • 点击clear清空所有数据，只需要清空数组即可

  2. 代码修改

    <html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <title>待办清单list</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta name="robots" content="noindex, nofollow" />
   <meta name="googlebot" content="noindex, nofollow" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" type="text/css" href="./css/index.css" />
 </head>

 <body>
   <!-- VUE示例接管区域 -->
   <section id="app">
     <!-- 输入框 -->
     <header class="header">
       <h1>待办清单</h1>

       <!-- 添加 数据绑定 和 回车添加进model数据列表的事件绑定-->
       <input
         autofocus="autofocus"
         autocomplete="off"
         placeholder="输入日程"
         class="new-todo"
         v-model="inputValue"
         @keyup.enter="add"
       />
     </header>

     <!-- 列表区域 -->
     <section class="main">
       <ul class="listview">
         <!-- 添加循环 -->
         <li v-for="(item, index) in todoList" class="todo">
           <div class="view">
             <span class="index">{{index+1}}.</span> <label>{{item}}</label>
             <!-- 删除按钮 -->
             <button class="destroy" @click="remove(index)"></button>
           </div>
         </li>
       </ul>
     </section>
     <!-- 统计和清空 -->
     <footer class="footer">
       <span class="todo-count">
         <!-- 此处添加数据的统计信息 -->
         <strong>{{todoList.length}}</strong> items left
       </span>
       <!-- 此处添加清空数组事件绑定 -->
       <button class="clear-completed" @click="clear">Clear</button>
     </footer>
   </section>

   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </body>

 <script src="./js/vue.min.js"></script>
 <script>
   var VM = new Vue({
     el: "#app",
     data: {
       inputValue: "待输入待办事项",
       todoList: ["事件1", "事件2"],
     },
     methods: {
       add: function () {
         this.todoList.push(this.inputValue);
       },
       //删除方法
       remove: function (index) {
         //使用splice(元素索引,删除几个) 根据索引删除
         //双向绑定数据，均只需要操作数据即可
         this.todoList.splice(index, 1);
       },
       //清空数组
       clear: function () {
         this.todoList = [];
       },
     },
   });
 </script>
</html>

  3. 测试结果

    在这里插入图片描述

    点击即可清空。

码进未来
关注
  • 14
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue待办清单
10-28
用javascript一个很有名的框架写的，一个由中国人开发出来的框架VUE，具体用了HTML5，CSS3，javascript和Vue
vue--实现todo案例
小白小白从不日别的博客
12-09 3361
大致步骤如下： 1.创建新工程 2.在 components 里分别创建 TodoList 的头部组件（TodoHeader.vue）、主体组件（TodoMain.vue）以及底部组件（TodoFooter.vue） 3.在三个组件里分别完成其页面结构和样式，并在 App.vue 里分别引入三个组件并注册和使用，再引入需要的样式文件，最后启动项目效果如下： 4.把待办任务, 展示到页面TodoMain.vue组件上并关联选中状态, 设置相关样式： App.vue – 准备数组...
八、【VUE-CLI】待办事项案例（第一版）
天行健，君子以自强不息
08-04 855
待办事项案例，之后会一点点优化这个案例
vue实现待办事项的小例子
苦瓜_小学生的博客
02-23 2248
要求： ①勾选按钮可以选择是否已完成 ②若已完成（被勾选），则字体变暗和被划去；若未完成（没有被勾选），则保持不变 ③每条待办事项可自由选择是否删除 ④可自由添加事务进入待办事项中，回车键效果一样 ⑤有数字提示总事项和未完成事项 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
使用vue做一个待办事项案例
qq_61342324的博客
10-17 567
待办事项”常用语题型某人还需要完成哪些事项，“待办”的意思是等待办理，“待办事项”意思是等待办理的事项，主要作用是提醒，常用在人们的日程生活中、学习和工作中。该对象的属性: 内容(title), 完成状态(checked), 编号(id)将文本框中输入的待办事项内容转换为一项待办事项对象数据。待办事项：在未来一段时间内需要去做的。在添加的逻辑中，需要获得到文本框中的输入值。每一项待办事项使用对象结构来保存，利用数组结构来保存所有待办事项.然后添加到所有待办事项数组中保存。在文本框中输入新待办事项内容。
Vue2（五）待办事项todo-list小案例
DogEgg_001的博客
07-27 805
现实中一个这样的案例不需要拆成很多个小组件，一个就搞定，不过为了更好的了解学习小知识点进行一个拆分是很有意义的。通过这个案例，编写组件的思路更加清晰，一步一步循序渐进，感觉还不错。学到了很多细碎的知识点。1.目前还没有学到事件总线，所以同级组件之间的数据交互是通过最基础的方式：数据放在父组件，再将数据传递给子组件；同时学到了重要的一点：父组件的函数也可以通过props属性传递给子组件，从而通过操作子组件实现父组件数据的交互。
vue实现待办事件列表
04-16
创建一个待办事件列表实现待办事件的增删改以及选中功能
基于Vue的前端设计与实现案例源码
04-06
本资源提供了一套基于Vue的前端设计与实现案例的设计源码，包含27个文件，其中包括24个JavaScript脚本文件，2个Markdown文档，以及1个HTML页面文件。这些文件详细展示了如何使用Vue进行前端设计与实现，非常适合用于...
待办事项清单：vue3
02-09
待办事项清单
一个基于vue的待办事项清单.zip
10-27
一个基于vue的待办事项清单.zip
VUE学习06--VUE实现简易toDoList（待办事项新增，切换，删除）
stalin_的博客
07-09 2178
结合前面学习过的一些知识点，今天我们来做一个toDoList的小Demo，具体的需求就是在vue页面上实现一个可以新增，删除，修改状态的待办事项。 效果图如下： 当然.....我们不做这么复杂的样式，只是实现一个这样的功能。 下面我们来贴一下代码，详细注释在代码中都有哦~~ <template> <div id="app"> <input type="text" v-model="todo" @keydown=doAdd($event)&gt...
ToDoList待办事件（Vue实现）详解
weixin_55355282的博客
09-15 1025
组件化编程流程：（1）拆分静态组件：组件按照功能点拆分，命名不与html元素冲突。（2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用（放在组件自身），还是一些组件在用（放在共同的父组件上面）。（3）实现交互：从绑定事件开始。props适用于：(1).父组件=>子组件 通信(2).子组件==>父组件通信（父组件先给子组件一个函数）使用v-model时要切记：v-model绑定的值不能使props传过来的，因为props是不可以修改的。
Vue实例待办事项
weixin_64925940的博客
05-16 2720
vue实现待办事项（技术： vue-cli,bulma,vuex）
Vue学习笔记（二）基于Vue2的TodoList待办事项案例 | localStorage本地存储 | Vue2的发布与订阅 | Vue2支持的动画类 |JavaScript原型对象
希望每天都能进步一点点
06-21 873
基于上一次的学习，最终使用Vue-CLI脚手架实现的TodoList案例效果如下图所示： 现对案例提出几个需求：最终实现的效果如下：参考资料：菜鸟教程 JavaScript 高阶JavaScript中的对象构造器 比如要添加一个属性 hobby 表示爱好错误示范： 正确示范： （修改原先的对象声明） 1. prototype 继承比如 JS 自带的一些对象：同理，我们之前定义的Person对象也会从 Person.prototype 继承属性和方法。所有 JavaScript 中的对象都是位于原型链顶端的
vue案例（代办任务案例）
m0_59878114的博客
09-26 555
开发环境： vue2.6.11 + vue-cli4.5.13 使用工具：vscode 使用技术：vue基础，css 案例描述：发起待办任务，勾选完成任务，查看任务状态，清除已完成的任务 css代码如下： base.css hr { margin: 20px 0; border: 0; border-top: 1px dashed #c5c5c5; border-bottom: 1px dashed #f7f7f7; } .learn a { font-weight...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 688
步骤很详细，直接上教程……
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 309
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
Vue项目中异步组件的引入使用
Niucode的博客
04-26 303
Vue项目中异步组件的引入使用
vue实现 我的待办事项
04-16
好的，关于vue实现待办事项，您可以参考以下步骤： 1. 安装vue.js，并创建一个新的vue项目。 2. 创建一个TodoList.vue组件，用于展示待做事项的列表和输入框。 3. 在TodoList.vue中，使用v-for指令遍历待做事项列表，并将每个事项渲染为一个li元素。 4. 为输入框添加一个v-model指令，绑定到一个data中的变量上，用于实时更新输入框中的内容。 5. 在输入框旁边添加一个按钮，添加一个点击事件，在事件处理函数中将输入框中的内容添加到待做事项列表中。 6. 在每个待做事项的li元素中添加一个删除按钮，添加一个点击事件，在事件处理函数中从待做事项列表中删除该事项。 以上是一个基本的vue实现待办事项的步骤，您可以根据实际需求进行更进一步的修改和优化。希望能对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值