005 列表渲染

1、用 v-for 把一个数组映射为一组元素

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

  <ul>

    <li v-for="item in items">{{item.message}}</li>

  </ul>

  data(){

    return{

      items:[{message:'Foo'},{message:'Bar'}]

    }

  }

2、维护状态

  当Vue正在更新使用 v-for 渲染的元素列,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

  为了给Aue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的 key attribute:

  <div v-for ="(item,index)in items" :key="item.id|index">

  <!--内容-->

  </div>

 

posted @ 2025-02-12 18:53  张筱菓  阅读(11)  评论(0)    收藏  举报