1.11 列表渲染
1.11.1 用法
语法:v-for="item in itemList" :key="item.id" (item是列表项,itemList是列表,key必须指定列表的唯一值)
-
遍历数组
<!-- item表示itemList的每一项,index表示itemList每一项的索引,key指定唯一标识 -->
<li v-for="(item, index) in itemList" :key="item.id">
{
{item.name}} - {
{item.age}}
</li>
-
遍历对象
<!-- value表示对象的值,k表示对象的键,key指定唯一标识 -->
<li v-for="(value, k) in itemList" :key="k">
{
{k}} - {
{value}}
</li>
1.11.2 key的作用
-
虚拟DOM中key的作用
-
key是虚拟DOM对象的标识,当状态中的数据发生改变时,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM和旧虚拟DOM的差异比较
-
-
对比规则:
-
旧虚拟DOM中找到了与新虚拟DOM相同的ke
-