# 实现逻辑：
> * 技术栈
> 1. 生命周期，creatd( 创建后执行)
> 2. methods'： 调用事件方法，结果不会缓存
> 3. Watch ： 监听器，监听输入的字数
> 4. Filters： 过滤器，时间
> 5. prevent ： 修饰符，阻止默认事件
> 6. computed： 计算属性，计算结果会被缓存
1 <template>
2 <div>
3 <H3>柚子小哥哥</H3>
4 // 这是一个输入框，双向绑定，给一个回车事件
5 <input type="text" v-model="inputVal" @keydown.enter="add" />
6 // 这是一个为完成的，通过计算属性来得出，没有完成的条数
7 <h3>未完成 ( {{ NoList }} )</h3>
8 <ul>
9 // 这是一个循环遍历一个数组，v-show，这里是显示在页面上，因为添加的时候，已经是false，现在取反就是显示在页面上。
10 <li v-for="(item, index) in TodoList" :key="index" v-show="!item.dome">
11 // 这是一个复选框，给一个点击事件，和一个修饰符，阻止默认事件在事件方法，传一个对象化，和布尔值，true，一个切换功能
12 <input type="checkbox" @click.prevent="change(item, true)" />
13 // 这是一个双击修改数据，先if判断取反，判断条件是缩影不等于负一，在双击的方法里面穿一个对象和下标
14 <span v-if="index != updateIndex" @dblclick="update(item, index)">
15 // 输入框出来的内容
16 {{ item.inputVal }}
17 </span>
18 // 这是一个输入框，判断下标等于负一，同时双向绑定内容，一个回车事件，和一个失去焦点事件
19 <input
20 v-if="index == updateIndex"
21 type="text"
22 v-model="item.inputVal"
23 @keydown.enter="updateServe"
24 @blur="updateServe"
25 />
26 // 这是一个点赞，功能，说白就是在添加的，一个数量的累加。
27 <span @click="Str(item)"> 点赞: {{ item.Strt }} </span>
28 // 这是一个事件的过滤器可以准确的计算出来。你什么时候发布的信息，
29 <span> {{ item.createTime | FiltersTime }} </span>
30 // 这是一个删除功能
31 <span @click="del(index)"> ×</span>
32 </li>
33 </ul>
34 //一个计算属性，计算出完成的条数
35 <h3>已完成 ( {{ YesList }} )</h3>
36 // 这是已完成的内容，和上面的内容差不多是相反的
37 <li v-for="(item, index) in TodoList" :key="index" v-show="item.dome">
38 <input type="checkbox" checked @click.prevent="change(item, false)" />
39 <span v-if="index != updateIndex" @dblclick="update(item, index)">
40 {{ item.inputVal }}
41 </span>
42 <input
43 v-if="index == updateIndex"
44 type="text"
45 v-model="item.inputVal"
46 @keydown.enter="updateServe"
47 @blur="updateServe"
48 />
49 <span @click="Str(item)"> 点赞: {{ item.Strt }} </span>
50 <span> {{ item.createTime | FiltersTime }} </span>
51 <span @click="del(index)"> ×</span>
52 </li>
53 <h3>
54 筛选部分
55 </h3>
56 // 这是一个诗选功能，一个下拉列表
57 <select v-model="screen">
58 <option value="">请选择</option>
59 <option value="whole">全部</option>
60 <option value="NO">未完成</option>
61 <option value="YES">已完成</option>
62 </select>
63 // 筛选成功之后，在fo循环遍历出来的数据
64 <ul>
65 <li v-for="(item, index) in ShowList" :key="index">
66 <span> {{ item.inputVal }}</span>
67 </li>
68 </ul>
69 </div>
70 </template>
71
72 <script>
73 export default {
74 data() {
75 return {
76 screen: "",
77 // 筛选添加的数组
78 ShowList: [],
79 // 一个双向绑定的空字符串
80 inputVal: "",
81 // 操作的是这数组
82 TodoList: [],
83 // 声明一个变量为-1，用来判断双击修改
84 updateIndex: -1,
85 // 修改要存放一个空字符串中
86 kong: "",
87 // 字数默认为0
88 small: 0,
89 // 不能超过为10
90 Big: 10,
91 // 这个是一个监听字体数量，输入的字体超过范围，则不能添加，这个ref；true就是可以添加的到页面的数据
92 referring: true,
93 };
94 },
95
96 // 这是一个声明周期一个方法，创建后自行，
97 created() {
98 // 这几行代码的意思就是，localStorage。初始化本地存储
99 let TodoList = localStorage.TodoList;
100 if (TodoList) {
101 this.TodoList = JSON.parse(TodoList);
102 }
103 // 这个是发布的事件排序
104 this.TodoList.sort(function(a, b) {
105 return b.createTime - a.createTime;
106 });
107 },
108 // 这个就是筛选功能，
109 watch: {
110 screen(newSerl) {
111 this.ShowList = [];
112 switch (newSerl) {
113 case "whole":
114 this.ShowList = this.TodoList;
115 break;
116 case "NO":
117 this.TodoList.map((item) => {
118 if (!item.dome) {
119 this.ShowList.push(item);
120 }
121 });
122 break;
123 case "YES":
124 this.TodoList.map((item) => {
125 if (item.dome) {
126 this.ShowList.push(item);
127 }
128 });
129 break;
130 }
131 },
132 },
133 // 这个就是一个时间的一个过滤器，
134 filters: {
135 FiltersTime(msg) {
136 let data = new Date();
137 let noe = data.getTime();
138 let time = (noe - msg) / 1000 / 60;
139 let Str = "";
140 if (time <= 1) {
141 Str = "刚刚";
142 } else if (time <= 2) {
143 Str = "1分钟前";
144 } else if (time <= 3) {
145 Str = "2分钟前";
146 } else {
147 let data = new Date();
148 data.setTime(msg);
149 // 这是一个模版字符串，时，分，秒
150 Str = `${data.getHours()}:${data.getMonth()}:${data.getSeconds()}`;
151 }
152 return Str;
153 },
154 },
155 // 计算属性，计算法已完成和未完成的条数
156 computed: {
157 //未完成的方法
158 NoList() {
159 let num = 0;
160 this.TodoList.map((item) => {
161 if (!item.dome) {
162 num++;
163 }
164 });
165 return num;
166 },
167 // 已完成的监听的条数
168 YesList() {
169 let num = 0;
170 this.TodoList.map((item) => {
171 if (item.dome) {
172 num++;
173 }
174 });
175 return num;
176 },
177 },
178 // 调用事件的方法，结果不会缓存
179 methods: {
180 // 点赞拱功能，一个对象的累加，保存到本地存储
181 Str(item) {
182 item.Strt++;
183 this.serve();
184 },
185 // 添加
186 add() {
187 // 这个就是判断，输入的字数超过了规定的字数，就是不执行一下的方法，return返回过去
188 if (!this.referring) {
189 alert("超过字数限制");
190 return;
191 }
192 // 这是一个判断，判断输入框不能为空，
193 if (this.inputVal != "") {
194 alert("添加成功");
195 this.TodoList.push({
196 inputVal: this.inputVal,// 一个输入框的双向绑定的一个
197 dome: false, // 这是一个复选框切换
198 Strt: 0, // 点赞功能
199 createTime: new Date().getTime(), // 这是一个时间戳
200 });
201 } else {
202 alert("不能为空");
203 }
204 // 清空
205 this.inputVal = "";
206 // 调用保存方法
207 this.serve();
208 // 这是一个时间的排序
209 this.TodoList.sort(function(a, b) {
210 return b.createTime - a.createTime;
211 });
212 },
213 // 复选框的切换功能
214 change(item, checked) {
215 if (checked) {
216 item.dome = true;
217 } else {
218 item.dome = false;
219 }
220 },
221 // 双击修改
222 update(item, index) {
223 this.kong = item.inputVal;
224 this.updateIndex = index;
225 },
226 // 还原数据
227 updateServe() {
228 this.updateIndex = -1;
229 this.inputVal = "";
230 this.serve();
231 },
232 // 删除
233 del(index) {
234 this.TodoList.splice(index, 1);
235 this.serve();
236 },
237 // 保存
238 serve() {
239 localStorage.TodoList = JSON.stringify(this.TodoList);
240 },
241 },
242 };
243 </script>
244 <style scoped></style>
## 实现效果：