vue3向數(shù)組插入一條自定義數(shù)據(jù)實(shí)現(xiàn)方式
1、在vue3中插入數(shù)據(jù):使用splice
<script setup>
import { nextTick, ref } from "vue";
//首先定義
const areaList=ref([])
/**地區(qū)下拉款 */
GetAreaList()
async function GetAreaList(){
areaList.value=await getArea(null);//調(diào)用接口返回?cái)?shù)據(jù)賦值
areaList.value.splice(0,0,{value:"", text: "全部"});//使用splice向數(shù)組插入一條自定義數(shù)據(jù)
}
</script>2、向數(shù)組插入多條數(shù)據(jù)
areaList.value.push({value:"", text: "全部"},{value:"other", text: "其他"});或者
如果我們想要將一個(gè)數(shù)組中的所有元素添加到另一個(gè)數(shù)組中,我們可以使用ES6的擴(kuò)展運(yùn)算符。
let array=[{value:"", text: "全部"},{value:"other", text: "其他"}];
areaList.value.push(...arras);//三個(gè)點(diǎn)...是ES6的擴(kuò)展運(yùn)算符總的來(lái)說(shuō),
- push方法是一個(gè)非常方便的方法,可以讓我們?cè)赩ue中輕松地向數(shù)組中添加新元素。
- 如果你有更復(fù)雜的應(yīng)用場(chǎng)景,可以使用其他的數(shù)組方法,如pop、shift、splice等。
splice()使用
splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目,然后返回被刪除的項(xiàng)目
注意:這種方法會(huì)改變?cè)紨?shù)組
語(yǔ)法:
array.splice(index,len,item1,.....,itemX)
index: 必需,數(shù)組開始下標(biāo) (必須是數(shù)字)len: 替換/刪除的長(zhǎng)度(必須是數(shù)字,但可以是 “0”;如果未規(guī)定此參數(shù),則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素。)item: 替換的值,刪除操作的話 item為空
比如上面提到:
areaList.value.splice(0,0,{value:"", text: "全部"});//使用splice向數(shù)組插入一條自定義數(shù)據(jù)說(shuō)明:
如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數(shù)組。
A、刪除
- //刪除起始下標(biāo)為1,長(zhǎng)度為1的一個(gè)值(len設(shè)置1,如果為0,則數(shù)組不變)
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,1); console.log(fruits); //["Banana", "Apple", "Mango"];
- //刪除起始下標(biāo)為1,長(zhǎng)度為2的一個(gè)值(len設(shè)置2)
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,2); console.log(fruits); //["Banana", "Mango"];
B、替換
- //替換起始下標(biāo)為1,長(zhǎng)度為1的一個(gè)值為‘ttt’,len設(shè)置的1
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,1,'ttt'); console.log(fruits); //["Banana", 'ttt',"Apple", "Mango"]; //替換起始下標(biāo)為1,長(zhǎng)度為2的兩個(gè)值為‘ttt',len設(shè)置的1
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,2,'ttt'); console.log(fruits); //["Banana", 'ttt', "Mango"];
C、添加
- //在下標(biāo)為1處添加一項(xiàng)’ttt’
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,0,'ttt'); console.log(fruits); //["Banana", 'ttt', "Orange", "Apple", "Mango"];
向數(shù)組中間添加元素
var items = ["1", "2", "3", "4"]; items.splice(items.length / 2, 0, "hello"); console.log(items); // ["1", "2", "hello", "3", "4"]
使用splice()修改數(shù)據(jù),動(dòng)態(tài)渲染dom不更新
當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí),它默認(rèn)用“就地復(fù)用”策略。
如果數(shù)據(jù)項(xiàng)的順序被改變,Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序, 而是簡(jiǎn)單復(fù)用此處每個(gè)元素,并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。
為了給 Vue 一個(gè)提示,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。理想的 key 值是每項(xiàng)都有的唯一 id。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue中element-ui?form或table?lable換行的問題
這篇文章主要介紹了vue中element-ui?form或table?lable換行的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
vue實(shí)現(xiàn)拖拽的簡(jiǎn)單案例 不超出可視區(qū)域
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽的簡(jiǎn)單案例,不超出可視區(qū)域,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個(gè)重要組成部分,詞云是一種非常流行的數(shù)據(jù)可視化形式,可以用來(lái)展示文本數(shù)據(jù)中的主題和關(guān)鍵字,本文我們將介紹如何在Vue中使用詞云庫(kù)進(jìn)行數(shù)據(jù)可視化詞云展示和詞云生成,需要的可以參考一下2023-06-06
vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結(jié)合完整實(shí)例形式分析了v-model實(shí)現(xiàn)表單input元素?cái)?shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
基于Vue3+IntersectionObserver實(shí)現(xiàn)高性能圖片懶加載
本文詳解 Vue3 中如何使用 IntersectionObserver API 實(shí)現(xiàn)圖片懶加載,核心優(yōu)勢(shì)在于進(jìn)入視口才加載圖片,可顯著提升首屏加載速度、節(jié)省帶寬資源、避免頁(yè)面卡頓,適合多圖列表場(chǎng)景,需要的朋友可以參考下2026-05-05

