标签：vue 入门 inputVal todoList dome TodoList item 一个 createTime
# 实现逻辑：
> * 技术栈
> 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>
## 实现效果：
标签：vue,入门,inputVal,todoList,dome,TodoList,item,一个,createTime 来源： https://www.cnblogs.com/yjzs/p/13173052.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。