# Vue项目案例

**Repository Path**: TXM0117/vue-project-case

## Basic Information

- **Project Name**: Vue项目案例
- **Description**: 各式各样的Vue项目案例  - (原生、组件)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: Vue-toods原生
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-16
- **Last Updated**: 2023-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-toods原生

### 业务思路

1 添加

 1 在data定义数据

  1 表示输入框的值  -  v-model 输入框关联

  2 表示列表数组 里面包装对象



 2 给输入框绑定 按下回车事件

 3 在数组中 来push新的输入框的值

 4 做数据渲染

  1 显示出文本

  2 元素的选中框和删除线 和 checked 做了关联

2 删除

 1 给标签绑定点击事件

 2 获取待删除掉元素的id

 3 根据id查找元素对应的数组的位置

 4 执行数组根据下标删除元素

3 勾选 单个任务 -  控制全选

 1 计算属性

4 点击 全选 控制 每一个元素的 选中状态

 1 计算属性 get set

5 全部 完成 未完成  筛选功能

 1 点击高亮

  1 把三个按钮 里面的文本 存放在一个数组中

  2 额外定一个变量，表示当前选中的文本

  3 点击谁 让谁选中 高亮

 2 配套出现对应的数据

  1 眼前看见列表 其实都是 筛选(计算属性)后的结果

6 统计 计算属性

 1 统计未完成

 2 统计已完成

7 清理已经完成任务

 1 真正筛选 - 留下未完成

8 添加本地存储

 1 data中获取list的时候 判断 本地存储有没有数据。。。

 2 利用watch 侦听 在list发生改变的时候 把数据存一份到本地存储中