一篇文章教會(huì)你創(chuàng)建vue項(xiàng)目和使用vue.js實(shí)現(xiàn)數(shù)據(jù)增刪改查
【六、數(shù)據(jù)添加方法】
1、獲取到id 和name,在data 上面獲取。
2、組織出一個(gè)對(duì)象,把這個(gè)對(duì)象調(diào)用數(shù)組的相關(guān)方法,添加到當(dāng)前data 上的 list 中。
3、在Vue.js中已經(jīng)實(shí)現(xiàn)了數(shù)據(jù)雙向綁定,每當(dāng)我們修改了data中的數(shù)據(jù)后,監(jiān)聽到數(shù)據(jù)改名,自動(dòng)把最新數(shù)據(jù)顯示在頁面。
4、在進(jìn)行VM中的Model數(shù)據(jù)操作,同時(shí),在操作Model數(shù)據(jù)的時(shí)候,指定的業(yè)務(wù)邏輯操作。
5、代碼如下圖:
【七、數(shù)據(jù)刪除方法】
1、如何根據(jù)Id,找到要?jiǎng)h除這一項(xiàng)的索引值。
2、當(dāng)找到索引了就調(diào)用數(shù)組的 splice方法。
3、代碼如下圖:
【八、數(shù)據(jù)修改方法】
1、定義一個(gè)在data自定義一個(gè)數(shù)組用來保存修改后的數(shù)據(jù)edit:[];
2、在方法里面定義對(duì)象,根據(jù)Id,找到修改這一項(xiàng)的索引值,找到索引值后數(shù)據(jù)就會(huì)更改。
3、代碼如下圖:
【九、數(shù)據(jù)查詢方法】
1、forEach 、some 、filter 、findIndex這些都屬于數(shù)組的新方法,都會(huì)對(duì)數(shù)組中的每一項(xiàng),進(jìn)行遍歷,執(zhí)行相關(guān)的操作。
2、在ES6中,為字符串提供了一個(gè)新方法,String.prototype.includes('要包含的字符串'),如果包含,則返回 true ,否則返回 false。
3、代碼如下圖:
【十、總結(jié)】
1、創(chuàng)建vue項(xiàng)目使用cmd命令安裝npm、cnpm、vue-cli、webpack,輸入vue ui開始創(chuàng)建vue項(xiàng)目。
2、刪除方法,可以使用索引,為每一行設(shè)置一個(gè)id屬性值,然后刪除總數(shù)據(jù)id屬性值的那個(gè)項(xiàng)。
3、操作Model數(shù)據(jù)的時(shí)候,指定的業(yè)務(wù)邏輯操作。

發(fā)表評(píng)論
請(qǐng)輸入評(píng)論內(nèi)容...
請(qǐng)輸入評(píng)論/評(píng)論長度6~500個(gè)字
最新活動(dòng)更多
-
3月27日立即報(bào)名>> 【工程師系列】汽車電子技術(shù)在線大會(huì)
-
4月30日立即下載>> 【村田汽車】汽車E/E架構(gòu)革新中,新智能座艙挑戰(zhàn)的解決方案
-
5月15-17日立即預(yù)約>> 【線下巡回】2025年STM32峰會(huì)
-
即日-5.15立即報(bào)名>>> 【在線會(huì)議】安森美Hyperlux™ ID系列引領(lǐng)iToF技術(shù)革新
-
5月15日立即下載>> 【白皮書】精確和高效地表征3000V/20A功率器件應(yīng)用指南
-
5月16日立即參評(píng) >> 【評(píng)選啟動(dòng)】維科杯·OFweek 2025(第十屆)人工智能行業(yè)年度評(píng)選
推薦專題
- 1 UALink規(guī)范發(fā)布:挑戰(zhàn)英偉達(dá)AI統(tǒng)治的開始
- 2 北電數(shù)智主辦酒仙橋論壇,探索AI產(chǎn)業(yè)發(fā)展新路徑
- 3 “AI寒武紀(jì)”爆發(fā)至今,五類新物種登上歷史舞臺(tái)
- 4 降薪、加班、裁員三重暴擊,“AI四小龍”已折戟兩家
- 5 國產(chǎn)智駕迎戰(zhàn)特斯拉FSD,AI含量差幾何?
- 6 光計(jì)算迎來商業(yè)化突破,但落地仍需時(shí)間
- 7 東陽光:2024年扭虧、一季度凈利大增,液冷疊加具身智能打開成長空間
- 8 地平線自動(dòng)駕駛方案解讀
- 9 封殺AI“照騙”,“淘寶們”終于不忍了?
- 10 優(yōu)必選:營收大增主靠小件,虧損繼續(xù)又逢關(guān)稅,能否乘機(jī)器人東風(fēng)翻身?