Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

学习Vue 入门到实战——学习笔记(二)

爱喝酸奶的吃货 2019-01-29 17:43:00 阅读数:139 评论数:0 点赞数:0 收藏数:0

闲聊:

     哈哈哈!过了好几天才更新博客啦,嘻嘻,马上过年了,大家最近是不是都开心的快飞起来了,小颖好几个朋友公司都已经放假了,可是我们公司要等到腊月29上完班才给放假,哎!心情不美气的很,用我之前大学舍友的话就是心情疼的很!!!!!,不知道大家都为过年准备了什么?或者有什么所期望的呢?准备:小颖准备减肥哈哈哈,这几天每天下班后坚持去舞蹈教室跟着老师学《和我交往吧》,舞蹈很萌很可爱,奈何我这糙汉子的内心,表现不出来那种萌的感觉,老师说跳这支舞蹈的时候,就要让人产生那种想要把你抱走的感觉,可是我感觉我跳的时候简直是辣眼睛啊,不过后期学完了,小颖想录个视频,也算是给自己一个交代吧,毕竟花了那么多钱学了那么久,嘻嘻,钱不能浪费;期望:小颖期望过完年后,不要长胖,毕竟过年就是各种吃,在自己家吃,在亲戚家吃·················想想都好开心哈哈哈哈。最后呢小颖提前祝大家:新年快乐,猪年大吉!

内容:    

       今天给大家分享下:实现对vue的data属性中的数据进行:增加、删除、查询操作。

前期准备:vue.jsbootstrap.min.css。

效果图:

公用代码:

vue测试 添加、删除、查询

Id:
Name:
添加 搜索名称关键字:
Id Name Ctime operation {{item.id}} {{item.name}} {{item.ctime}} 删除

在 methods 属性中添加以下代码:

1.增加:

add() {this.user.push({id: this.id, name: this.name, ctime: newDate()});this.id = '';this.name = ''; }

2.删除:

del(id) {//在数组的some方法中,如果return true,就会立即终止对这个歌数组的循环。 //this.user.some((item, i) => { //if (item.id == id) { //this.user.splice(i, 1); //return true; //} //}); var index = this.user.findIndex(item =>{if (item.id ==id) {return true; } });this.user.splice(index, 1); }

3.查询:

这时需要把html中的  tbody  内的代码改为: {{item.id}} {{item.name}} {{item.ctime}} 删除

js

search(keywords) {//var newList = []; //this.user.forEach(item => { //if (item.name.indexOf(keywords) != -1) { //newList.push(item); //} //}); //return newList; return this.user.filter(item =>{if(item.name.includes(keywords)) {returnitem; } }) }

 快过年啦,能不能给小颖个小红包呢,嘻嘻,求点赞,求打赏哦!谢谢啦

 

版权声明
本文为[爱喝酸奶的吃货]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/yingzi1028/p/10335051.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领