一篇文章教會你創(chuàng)建vue項(xiàng)目和使用vue.js實(shí)現(xiàn)數(shù)據(jù)增刪改查
【六、數(shù)據(jù)添加方法】
1、獲取到id 和name,在data 上面獲取。
2、組織出一個(gè)對象,把這個(gè)對象調(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ù)改名,自動把最新數(shù)據(jù)顯示在頁面。
4、在進(jìn)行VM中的Model數(shù)據(jù)操作,同時(shí),在操作Model數(shù)據(jù)的時(shí)候,指定的業(yè)務(wù)邏輯操作。
5、代碼如下圖:
【七、數(shù)據(jù)刪除方法】
1、如何根據(jù)Id,找到要刪除這一項(xiàng)的索引值。
2、當(dāng)找到索引了就調(diào)用數(shù)組的 splice方法。
3、代碼如下圖:
【八、數(shù)據(jù)修改方法】
1、定義一個(gè)在data自定義一個(gè)數(shù)組用來保存修改后的數(shù)據(jù)edit:[];
2、在方法里面定義對象,根據(jù)Id,找到修改這一項(xiàng)的索引值,找到索引值后數(shù)據(jù)就會更改。
3、代碼如下圖:
【九、數(shù)據(jù)查詢方法】
1、forEach 、some 、filter 、findIndex這些都屬于數(shù)組的新方法,都會對數(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ù)邏輯操作。

請輸入評論內(nèi)容...
請輸入評論/評論長度6~500個(gè)字
最新活動更多
-
6月20日立即下載>> 【白皮書】精準(zhǔn)測量 安全高效——福祿克光伏行業(yè)解決方案
-
7月3日立即報(bào)名>> 【在線會議】英飛凌新一代智能照明方案賦能綠色建筑與工業(yè)互聯(lián)
-
7月22-29日立即報(bào)名>> 【線下論壇】第三屆安富利汽車生態(tài)圈峰會
-
7.30-8.1火熱報(bào)名中>> 全數(shù)會2025(第六屆)機(jī)器人及智能工廠展
-
7月31日免費(fèi)預(yù)約>> OFweek 2025具身機(jī)器人動力電池技術(shù)應(yīng)用大會
-
免費(fèi)參會立即報(bào)名>> 7月30日- 8月1日 2025全數(shù)會工業(yè)芯片與傳感儀表展
推薦專題
- 1 AI 眼鏡讓百萬 APP「集體失業(yè)」?
- 2 大廠紛紛入局,百度、阿里、字節(jié)搶奪Agent話語權(quán)
- 3 深度報(bào)告|中國AI產(chǎn)業(yè)正在崛起成全球力量,市場潛力和關(guān)鍵挑戰(zhàn)有哪些?
- 4 一文看懂視覺語言動作模型(VLA)及其應(yīng)用
- 5 上海跑出80億超級獨(dú)角獸:獲上市公司戰(zhàn)投,干人形機(jī)器人
- 6 國家數(shù)據(jù)局局長劉烈宏調(diào)研格創(chuàng)東智
- 7 下一代入口之戰(zhàn):大廠為何紛紛押注智能體?
- 8 百億AI芯片訂單,瘋狂傾銷中東?
- 9 Robotaxi新消息密集釋放,量產(chǎn)元年誰在領(lǐng)跑?
- 10 格斗大賽出圈!人形機(jī)器人致命短板曝光:頭腦過于簡單