vue3框架_列表渲染

vue3框架_列表渲染

一.使用介绍

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

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更 新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素 来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每 个索引位置正确渲染。 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和 重新排序现有元素，你需要为每项提供一个唯一的 key attribute。

二.实例

<template>
  <div class="hello">
    <h3>{{ 列表渲染 }}</h3>
    <ul>
      <li v-for="it in newsList" :key="it.id">{{ it.title }}</li>
    </ul>


  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      newsList:[
        {
          id:1001,
          title:'新闻1'
        },
        {
          id:1002,
          title:'新闻2'
        },
        {
          id:1003,
          title:'新闻3'
        }
      ]
    }
  }
}
</script>