vue 列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表。 v-for指令的值需要使用 item in items 形式的特殊语法。其中 items 是源数据的数组，而 item 是迭代项的别名。

template>
  <div>
    <p v-for="item in name">{{ item }}</p>
  </div>
</template>

<script>
export default{
  data(){
    return{
      name:["a","b","c"]
    }
  }
}
</script>

复杂数据 

大多数情况，我们渲染的数据源来源于网络请求，也就是 JsoN 格式

<template>
  <div v-for="item in result">
    <p >{{ item.title }}</p>
    <img v-bind:src="item.avator">
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:[{
        "id": 111,
        "title": "图片1",
        "avator":"vue-damo1/src/img/OIP-C (1).jfif"
      },
      {
        "id": 112,
        "title": "图片2",
        "avator":"vue-damo1/src/img/OIP-C (2).jfif"
      },
      {
        "id": 113,
        "title": "图片3",
        "avator":"vue-damo1/src/img/OIP-C.jfif"
      }
    ]
    }
  }
}
</script>

 

v-for也支持使用可选的第二个参数表示当前项的位置索引 。

<template>
  <div v-for="(item,index) in result">{{ index }}
    <p >{{ item.title}}</p>
    <img v-bind:src="item.avator">
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:[{
        "id": 111,
        "title": "图片1",
        "avator":"vue-damo1/src/img/OIP-C (1).jfif"
      },
      {
        "id": 112,
        "title": "图片2",
        "avator":"vue-damo1/src/img/OIP-C (2).jfif"
      },
      {
        "id": 113,
        "title": "图片3",
        "avator":"vue-damo1/src/img/OIP-C.jfif"
      }
    ]
    }
  }
}
</script>

注意：可以将in改为of 这样更加接近js的迭代语法。

v-for遍历对象 

 

<template>
  <div>
    <p v-for="(value,key,index) in result">{{ value }}-{{ key }}-{{ index }}</p>
    <!-- value代表对象属性的值 key表示对象属性名 index代表下标-->
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:{
        name:"张三",
        age:"11",
        sex:"男"
      }
    }
  }
}
</script>

 

通过 key 来管理状态

ue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute。

<template>
  <div>
    <p v-for="(value,key,index) in result" :key="index">{{ value }}-{{ key }}-{{ index }}</p>
    <!-- value代表对象属性的值 key表示对象属性名 index代表下标-->
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:{
        name:"张三",
        age:"11",
        sex:"男"
      } 
    }
  }
}
</script>

注意：key 在这里是一个通过 v-bind 绑定的特殊 attribute推荐在任何可行的时候为 v-for 提供一个 key attributekey 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。

key的来源 

尽量不要使用 index 作为 key 的值，我们要确保每一条数据的唯一索引不会发生变化。

<template>
  <div>
    <p v-for="(value,key,index) in result" :key="result.id">{{ value }}-{{ key }}-{{ index }}</p>
    <!-- value代表对象属性的值 key表示对象属性名 index代表下标-->
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:{
         id:"111",
        name:"张三",
        age:"11",
        sex:"男"
      } 
    }
  }
}
</script>