vue3向数组插入一条自定义数据实现方式
作者：吱吱喔喔
这篇文章主要介绍了vue3向数组插入一条自定义数据实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1、在vue3中插入数据：使用splice
<script setup>
import { nextTick, ref } from "vue";
//首先定义
const areaList=ref([])
/**地区下拉款 */
GetAreaList()
async function GetAreaList(){
areaList.value=await getArea(null);//调用接口返回数据赋值
areaList.value.splice(0,0,{value:"", text: "全部"});//使用splice向数组插入一条自定义数据
}
</script>2、向数组插入多条数据
areaList.value.push({value:"", text: "全部"},{value:"other", text: "其他"});或者
如果我们想要将一个数组中的所有元素添加到另一个数组中，我们可以使用ES6的扩展运算符。
let array=[{value:"", text: "全部"},{value:"other", text: "其他"}];
areaList.value.push(...arras);//三个点...是ES6的扩展运算符总的来说，
- push方法是一个非常方便的方法，可以让我们在Vue中轻松地向数组中添加新元素。
- 如果你有更复杂的应用场景，可以使用其他的数组方法，如pop、shift、splice等。
splice()使用
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
注意：这种方法会改变原始数组
语法：
array.splice(index,len,item1,.....,itemX)
index: 必需，数组开始下标 （必须是数字）len: 替换/删除的长度（必须是数字，但可以是 “0”；如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。）item: 替换的值，删除操作的话 item为空
比如上面提到：
areaList.value.splice(0,0,{value:"", text: "全部"});//使用splice向数组插入一条自定义数据说明：
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
A、删除
- //删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,1); console.log(fruits); //["Banana", "Apple", "Mango"];
- //删除起始下标为1，长度为2的一个值(len设置2)
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,2); console.log(fruits); //["Banana", "Mango"];
B、替换
- //替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,1,'ttt'); console.log(fruits); //["Banana", 'ttt',"Apple", "Mango"]; //替换起始下标为1，长度为2的两个值为‘ttt'，len设置的1
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,2,'ttt'); console.log(fruits); //["Banana", 'ttt', "Mango"];
C、添加
- //在下标为1处添加一项’ttt’
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1,0,'ttt'); console.log(fruits); //["Banana", 'ttt', "Orange", "Apple", "Mango"];
向数组中间添加元素
var items = ["1", "2", "3", "4"]; items.splice(items.length / 2, 0, "hello"); console.log(items); // ["1", "2", "hello", "3", "4"]
使用splice()修改数据,动态渲染dom不更新
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。