vue3向數(shù)組插入一條自定義數(shù)據(jù)實現(xiàn)方式
更新時間：2025年09月15日 17:33:57 作者：吱吱喔喔
這篇文章主要介紹了vue3向數(shù)組插入一條自定義數(shù)據(jù)實現(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)用接口返回數(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: "其他"});或者
如果我們想要將一個數(shù)組中的所有元素添加到另一個數(shù)組中，我們可以使用ES6的擴展運算符。
let array=[{value:"", text: "全部"},{value:"other", text: "其他"}];
areaList.value.push(...arras);//三個點...是ES6的擴展運算符總的來說，
- push方法是一個非常方便的方法，可以讓我們在Vue中輕松地向數(shù)組中添加新元素。
- 如果你有更復(fù)雜的應(yīng)用場景，可以使用其他的數(shù)組方法，如pop、shift、splice等。
splice()使用
splice() 方法向/從數(shù)組中添加/刪除項目，然后返回被刪除的項目
注意：這種方法會改變原始數(shù)組
語法：
array.splice(index,len,item1,.....,itemX)
index: 必需，數(shù)組開始下標(biāo) （必須是數(shù)字）len: 替換/刪除的長度（必須是數(shù)字，但可以是 “0”；如果未規(guī)定此參數(shù)，則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素。）item: 替換的值，刪除操作的話 item為空
比如上面提到：
areaList.value.splice(0,0,{value:"", text: "全部"});//使用splice向數(shù)組插入一條自定義數(shù)據(jù)說明：
如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組。
A、刪除
- //刪除起始下標(biāo)為1，長度為1的一個值(len設(shè)置1，如果為0，則數(shù)組不變)
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,1); console.log(fruits); //["Banana", "Apple", "Mango"];
- //刪除起始下標(biāo)為1，長度為2的一個值(len設(shè)置2)
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,2); console.log(fruits); //["Banana", "Mango"];
B、替換
- //替換起始下標(biāo)為1，長度為1的一個值為‘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，長度為2的兩個值為‘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處添加一項’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ù),動態(tài)渲染dom不更新
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復(fù)用”策略。
如果數(shù)據(jù)項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。
為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值2022-09-09
這篇文章主要介紹了Vue如何獲取下拉框中選中的value值和label值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue之修改數(shù)據(jù)頁面不更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
在axios中使用params傳參的時候傳入數(shù)組的方法
今天小編就為大家分享一篇在axios中使用params傳參的時候傳入數(shù)組的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文主要實現(xiàn)vue項目中,消息列表逐條向上無縫滾動,每條消息展示10秒后再滾動,為了保證用戶能看清消息主題,未使用第三方插件,本文實現(xiàn)方法比較簡約,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Vue3新增時自動獲取當(dāng)前時間的操作方法,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化,在Vue.js中可以通過watch監(jiān)聽屬性變化并動態(tài)修改其他屬性的值,watch通過監(jiān)聽器函數(shù)接收新舊值,實現(xiàn)屬性間的數(shù)據(jù)聯(lián)動,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了如何修改vant的less樣式變量方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3實現(xiàn)在新標(biāo)簽中打開指定網(wǎng)址的方法
我希望點擊查看按鈕的時候,能夠在新的標(biāo)簽頁面打開這個文件的地址進行預(yù)覽,該如何實現(xiàn)呢,下面小編給大家?guī)砹嘶趘ue3實現(xiàn)在新標(biāo)簽中打開指定的網(wǎng)址,感興趣的朋友跟隨小編一起看看吧2024-07-07