1.v-for遍歷的key不能是index剪返,必須是數(shù)據(jù)的特定值整慎,要能與業(yè)務(wù)實體相關(guān)聯(lián)的踊挠,如數(shù)據(jù)的id或者對象的key值
2.v-for 與 v-if 不能同在一個模板標簽里面
<template>
<div>
<p>遍歷數(shù)組</p>
<ul>
<li v-for="(item, index) in listArr" :key="item.id">
{{index}} - {{item.id}} - {{item.title}}
</li>
</ul>
<p>遍歷對象</p>
<ul >
<li v-for="(val, key, index) in listObj" :key="key">
{{index}} - {{key}} - {{val.title}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
flag: false,
listArr: [
{ id: 'a', title: '標題1' }, // 數(shù)據(jù)結(jié)構(gòu)中食绿,最好有 id 锨苏,方便使用 key
{ id: 'b', title: '標題2' },
{ id: 'c', title: '標題3' }
],
listObj: {
a: { title: '標題1' },
b: { title: '標題2' },
c: { title: '標題3' },
}
}
}
}
</script>