No.59 Vue---列表渲染

一、列表渲染

1.1 v-for

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

<template>
  <p v-if="flag">俺是齊天大聖孫悟空</p>
  <p v-else>你不齊天大聖孫悟空</p>
  <p v-show="flag">你真的是齊天大聖孫悟空嗎</p>
  <ul>
    <li v-for="item in newList">
      {{item.title }}
    </li>
  </ul>

</template>

<script>
export default {
  data(){
    return{
      flag:true,

      newList:[
        {
        id:1001,
        title:"今日新聞1"
      },
        {
        id:1001,
        title:"今日新聞1"
      },
        {
        id:1001,
        title:"今日新聞1"
      }
    ]
    }
  }
}
</script>

 

维护状态：

• 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。

• 如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

 

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

<template>
  <p v-if="flag">俺是齊天大聖孫悟空</p>
  <p v-else>你不齊天大聖孫悟空</p>
  <p v-show="flag">你真的是齊天大聖孫悟空嗎</p>
  <ul>
    <li v-for="item in newList" :key="item.id">
      {{item.title }}
    </li>
  </ul>

</template>

<script>
export default {
  data(){
    return{
      flag:true,

      newList:[
        {
        id:1001,
        title:"今日新聞1"
      },
        {
        id:1002,
        title:"今日新聞2"
      },
        {
        id:1003,
        title:"今日新聞3"
      },
        {
        id:1004,
        title:"今日新聞4"
      }
    ]
    }
  }
}
</script>