• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

vue 入门, todoList

开发技术 开发技术 4周前 (06-21) 30次浏览

#  实现逻辑:

> * 技术栈
> 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 入门, todoList

 


程序员灯塔 , 版权所有
转载请注明原文链接:https://www.wangt.cc/2020/06/vue-%e5%85%a5%e9%97%a8%ef%bc%8c-todolist/
喜欢 (0)