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

最新活動更多
-
8月5日立即報名>> 【在線會議】CAE優(yōu)化設(shè)計:醫(yī)療器械設(shè)計的應(yīng)用案例與方案解析
-
8月14日立即報名>> 【在線研討會】解析安森美(onsemi)高精度與超低功耗CGM系統(tǒng)解決方案
-
精彩回顧立即查看>> 《2024智能制造產(chǎn)業(yè)高端化、智能化、綠色化發(fā)展藍皮書》
-
精彩回顧立即查看>> 7月30日- 8月1日 2025全數(shù)會工業(yè)芯片與傳感儀表展
-
精彩回顧立即查看>> 全數(shù)會2025(第六屆)機器人及智能工廠展
-
精彩回顧立即查看>> OFweek 2025 具身機器人動力電池技術(shù)應(yīng)用大會
推薦專題
- 1 AI產(chǎn)業(yè)的新高度!英偉達成為全球首家市值破4萬億美元的公司
- 2 傳魏建軍與賈躍亭合作,長城汽車出海美國
- 3 一文讀懂:到底什么是 “具身智能” ?
- 4 黃仁勛:與雷軍長期合作,共探AI智駕
- 5 具身智能泡沫爭議下,華映資本尋找「穿越周期者」
- 6 中國平安們欲靠AI守“陣地”
- 7 官宣:智元機器人借殼上市,A股人形機器人第一股!
- 8 華為讓渡“三界”銷售主導(dǎo)權(quán),智界高管:終于能全力奔跑了
- 9 借仿生手實現(xiàn)突圍,國產(chǎn)靈巧手破局“不可能三角”
- 10 DeepSeek R2加持,中國AI與芯片產(chǎn)業(yè)迎來新一輪協(xié)同進化