v-for遍历产生列表时, 每个项标签都需要有一个唯一的key值，
如果数组元素有自己的标识数据, 用它作为key值, 否则才选择下标作为key。
v-for 可以遍历数组 也可以 遍历对象。
使用时记两种方法：
1.有唯一标识则使用时用唯一标识 如：id
2.只要不涉及删改时可以使用下标index
<template>
<div>
<h2>v-for 遍历数组</h2>
<ul>
<li v-for="(item, index) in loList" :key="item.id">
{{item.id}}--{{item.name}}--{{item.age}}
--<button @click="deleteItem(index)">删除</button>
--<button @click="updateItem(index, {id: Date.now(), name:'更新后的name', age: 8})">更新当前点击的对象</button>
</li>
</ul>
<h2>v-for 遍历对象</h2>
<ul>
<li v-for="(value, key) in loList[1]" :key="key">
{{key}}---{{value}}
</li>
</ul>
</div>
</template>
<script lang="ts">
// vue3.0版本语法
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: "组件名",
setup() {
const loList = ref([
{
id: '11',
age: 1,
name: 's赛15分钟速通'
},
{
id: '12',
age: 2,
name: 's赛5连冠任务'
},
{
id: '13',
age: 3,
name: '单吃shy任务'
},
{
id: '14',
age: 4,
name: ''
},
])
// 删除某个元素的事件
const deleteItem = (index) => {
loList.value.splice(index, 1)
}
// 更新（替换）指定下标的对象
const updateItem = (index, newP) => {
// 方式一: 直接根据下标替换数组元素
// loList.value[index] = newP
// 方法二: 调用数组更新元素的方法splice
// loList.value.splice(index, 1, newP)
// 方式三: 更新数组元素对象内部的属性
loList.value[index].id = newP.id
loList.value[index].name = newP.name
loList.value[index].age = newP.age
}
return {
loList,deleteItem,updateItem
}
},
});
</script>
