Vue笔记：v-for
程序员文章站
2023-12-23 12:42:22
...
一、向数组中插入某元素
使用v-for来循环显示list中的项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
list:["a","b","c","d"]
},
methods:{}
})
</script>
</body>
</html>
向列表中插入元素
arrayObject.splice函数：
from：https://www.w3school.com.cn/jsref/jsref_obj_array.asp
splice()函数用于删除包含在括号中的数组，并添加新的数据（直接对数组进行修改）
语法：
arrayObject.splice(index,howmany,item1,.....,itemX)
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
| howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
| item1,......,itemX | 可选。向数组添加的新项目。 |
这个函数可以实现三个功能
| 删除元素 | 第二个参数传入删除的个数，不传参数就删除所有元素 |
| 替换元素 | 第二个元素传入替换的个数，后面的参数可以传入若干个要替换进去的元素 |
| 插入元素 | 第一个参数传入插入位置，第二个参数传入0，第三个参数可以传入若干个要插入的元素 |
系统推荐绑定key
当一层有很多相同的节点时，Diff的算法默认执行时把b变成e，c变成b…依次下去，这样很没有效率。
当绑定了key时，会给每个节点一个唯一标识，Diff算法就可以正确识别此节点，然后找到郑雪的位置插入。绑定key以后vue会先把key和内容进行对应，当插入时如果发现key中元素没有变则不会重新渲染，发现有新的元素会先创建对应关系，再插入。
<li v-for="item in list" :key="item">{{item}}</li>
不能绑定index，因为index每次是会变的，所以每次还是要重新创建对应关系，降低性能。
但是这个有一个缺点是数组元素不能重复，不然会报错key重复了
二、数组中的响应函数
- arrayList.push()从尾加入元素
- arrayList.pop()从尾删除元素
- arrayList.shift()从头删除元素
- arrayList.unshift()从头加入元素
- arrayList.splice()
- arrayList.sort()排序
- arrayList.reserve()颠倒元素
t()排序
Vue中也可以通过Vue.set(this.list,index,…item)函数来修改数组的值，其中this.list是要修改的数组，index是索引值，item是修改后的值