学习记录-vue2,3-记事本案例-优快云博客

本文链接：https://blog.youkuaiyun.com/sinbowper/article/details/146473959

记事本案例功能描述

输入内容，点击添加，会从输入框下方添加待办事项
点击待办事项右侧的x，会将其删除
当代办事项为零时，记事本底部消失
记事本底部记录了代办事项条数，点击清除全部按钮，代办事项清零

购物车案例实现步骤

1. 概念理解

了解vue基础指令

代码	含义
v-model	绑定表单数据，当v-model后的数据名称与data定义的数据名称一致时，就会双向绑定
v-show	后跟判断语句，当为假时，给予该元素display：none属性
v-if,v-else,v-else if	通常同时出现，后跟条件判断语句，当为假时，直接删除该元素
v-for	数据映射，有item，和index两个参数
v-bind	后加事件名，可简写为@事件名

2. 渲染数据

将初始数据用v-for渲染到页面上，事件名称和序号分别用item.name和index替换

    	     <li class="todo" v-for="(item,index) in hobby" :key="item.id">			//为了精确定位，v-for后必须要跟:key="item.id"
          <div class="view">
            <span class="index">{{index+1}}.</span> <label>{{item.ho}}</label>
            <button class="destroy" @click="del(item.id)"></button>
          </div>
        </li>

实现效果
在这里插入图片描述

3. 数据添加

读取输入框数据，将其以对象的形式推入初始数据中

add() {
          this.hobby.unshift({
            id: +new Date(),			//防止id重复，可以用时间戳代替id
            ho: this.newTodo
          })
          this.newTodo = ''				//输入完清空输入框
        },

实现效果
在这里插入图片描述

4. 数据删除

使用filter和item.id将选中的数据排除在外，重新赋给初始数据，实现删除数据的效果

	del(i) {
          this.hobby = this.hobby.filter(item => item.id !== i)			//数据筛选
        }

在这里插入图片描述

5.底部处理

当数据的长度为0时，将底部隐藏，代办事项的总数为数据的长度；点击底部清除按钮，待办事项全部清除
html

 	<footer class="footer" v-show="hobby.length!==0">			//数据长度为零时，隐藏底部
      <span class="todo-count">合 计:<strong>{{hobby.length}}</strong></span>
      <button class="clear-completed" @click="clear">			//绑定点击事件，执行清空函数
      </button>
    </footer>
``
```javascript
clear() {
          this.hobby = []
        },

实现效果
在这里插入图片描述

完整实例代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>记事本</title>
</head>

<body>

  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input v-model="newTodo" placeholder="请输入任务" class="new-todo" />
      <button @click="add" class="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in hobby" :key="item.id">
          <div class="view">
            <span class="index">{{index+1}}.</span> <label>{{item.ho}}</label>
            <button class="destroy" @click="del(item.id)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="hobby.length!==0">
      <!-- 统计 -->
      <span class="todo-count">合 计:<strong>{{hobby.length}}</strong></span>
      <!-- 清空 -->
      <button class="clear-completed" @click="clear">
        清空任务
      </button>
    </footer>
  </section>

  <!-- 底部 -->
  <script src="../vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        hobby: [
          { id: 1, ho: '吃饭' },
          { id: 2, ho: '睡觉' },
          { id: 3, ho: '打豆豆' }
        ],
        newTodo: ''
      },
      methods: {
        clear() {
          this.hobby = []
        },
        add() {
          this.hobby.unshift({
            id: +new Date(),
            ho: this.newTodo
          })
          this.newTodo = ''
        },
        del(i) {
          this.hobby = this.hobby.filter(item => item.id !== i)
        }
      }
    })

  </script>
</body>

</html>