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)文章
vue element table中自定義一些input的驗(yàn)證操作
這篇文章主要介紹了vue element table中自定義一些input的驗(yàn)證操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue通信方式EventBus的實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了vue通信方法EventBus的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
<Suspense>是 Vue3 中的一個(gè)實(shí)驗(yàn)性功能,用于處理異步組件和依賴,它允許你在等待多個(gè)異步依賴項(xiàng)解析時(shí)顯示一個(gè)加載狀態(tài),并提供了超時(shí)處理、錯(cuò)誤捕獲和嵌套使用等功能,通過合理使用<Suspense>,可以提升用戶體驗(yàn),特別是在處理復(fù)雜異步操作時(shí)2025-10-10
解決vue單頁(yè)面應(yīng)用進(jìn)入頁(yè)面加載所有 js 的問題
這篇文章主要介紹了解決vue單頁(yè)面應(yīng)用進(jìn)入頁(yè)面加載所有 js 的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊(cè)和使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue如何自定義事件傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
vue使用echarts實(shí)現(xiàn)地圖的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)地圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))
這篇文章主要介紹了vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實(shí)現(xiàn)上拉加載下一頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)上拉加載下一頁(yè)效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-08-08