vue.js如何處理數(shù)組對(duì)象中某個(gè)字段是否變?yōu)閮蓚€(gè)字段
更新時(shí)間：2025年03月27日 09:02:38 作者：Lemon今天學(xué)習(xí)了嗎
這篇文章主要介紹了vue.js如何處理數(shù)組對(duì)象中某個(gè)字段是否變?yōu)閮蓚€(gè)字段方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
場(chǎng)景
產(chǎn)品要求做一個(gè)時(shí)間步驟條，使用目前后端已返回的數(shù)據(jù)進(jìn)行操作實(shí)現(xiàn)。時(shí)間步驟條要求日期和時(shí)間分開顯示且相同日期只顯示第一個(gè)日期。
圖左邊為實(shí)現(xiàn)效果，右邊為后臺(tái)返回的接口。接口中current字段表示當(dāng)前到達(dá)第幾步，從0開始，對(duì)應(yīng)顯示數(shù)組的前幾個(gè)展示。后臺(tái)返回的是一個(gè)整的日期時(shí)間字段dateTime。
處理思路
- 拿出nodes數(shù)組對(duì)象中與current字段對(duì)應(yīng)的步驟數(shù)據(jù)放入新數(shù)組slicedNodes；
- 再循環(huán)處理slicedNodes數(shù)組對(duì)象里的dateTime字段，將其拆分成date, time兩個(gè)字段；
- 比較date字段是否有重復(fù)的，沒有則賦值該字段到一個(gè)新數(shù)組prevDate；
- 將新數(shù)組添加到result數(shù)組即可組裝完成。
代碼實(shí)現(xiàn)
computed: {
// 過程數(shù)組
processedNodes() {
// 將數(shù)組截取的副本返回到新的數(shù)組對(duì)象:array.slice[start, end)
const slicedNodes = this.twrProcess?.nodes.slice( 0, parseInt(this.twrProcess?.current,10) + 1);
const result = [];
let prevDate = null;
slicedNodes?.forEach((node) => {
// 將dateTime日期時(shí)間字段拆分成date, time兩個(gè)字段
const [date, time] = node.dateTime.split(" ");
const newObj = { ...node };
// 將不一致的date放入newObj.date
if (date !== prevDate) {
newObj.date = date;
prevDate = date;
}
newObj.time = time;
result.push(newObj);
});
return result;
},
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
這篇文章主要為大家介紹了echarts設(shè)置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-10-10
vue自定義實(shí)例化modal彈窗功能的實(shí)現(xiàn)
這篇文章主要介紹了vue自定義實(shí)例化modal彈窗,Vue.extend 屬于Vue的全局 api，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?nbsp;Vue.component寫法使用 extend 步驟要更加繁瑣一些，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下2022-09-09
這篇文章主要介紹了vue中的循環(huán)對(duì)象屬性和屬性值用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
關(guān)于vue組件的更新機(jī)制?resize()?callResize()
這篇文章主要介紹了關(guān)于vue組件的更新機(jī)制?resize()?callResize()，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)天氣預(yù)報(bào)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue路由切換的兩種方式,主要包括標(biāo)簽切換和js切換，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
組合式API為Vue3帶來了更好的邏輯組織和復(fù)用性,支持TypeScript,提供靈活的響應(yīng)式系統(tǒng),它允許開發(fā)者將相關(guān)邏輯組合在一起,通過composable函數(shù)實(shí)現(xiàn)邏輯復(fù)用,擺脫了mixin的缺點(diǎn),同時(shí),組合式API與TypeScript的集成更緊密,能夠提供更準(zhǔn)確的類型推斷2024-10-10
這篇文章主要介紹了element?upload?鉤子函數(shù)的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10