Vue研习录（04）——列表渲染详解及示例分析

版权声明

• 本文原创作者：清风不渡
• 博客地址：https://blog.csdn.net/WXKKang

  重拾前端记忆，记录学习笔记，现在进入列表渲染部分

一、v-for

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

<template>
  <div class="hello">
    <ul>
      <li v-for="item in items">{{ item.message }}</li>
    </ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      items : [{message:'HTML'},{message:'CSS'},{message:'JS'}]
    }
  }
}
</script>

  结果如下：

二、维护状态

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

<template>
  <div class="hello">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.message }}</li>
    </ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      items : [
        {
          id : '0001',
          message:'HTML'
        },
        {
          id : '0002',
          message:'CSS'
        },
        {
          id : '0003',
          message:'JS'
        }]
    }
  }
}
</script>

  也可以为，但最好为上面这个：

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in items" :key="index">{{ item.message }}</li>
    </ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      items : [
        {
          message:'HTML'
        },
        {
          message:'CSS'
        },
        {
          message:'JS'
        }]
    }
  }
}
</script>

三、v-for 与对象

  你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定，示例如下：

<template>
  <div class="hello">
    <ul>
      <li v-for="(value,key,index) in user">{{ index }} : {{ key }} : {{ value }}</li>
    </ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
      name: 'TOM',
      age: '19',
      occupation: 'teacher'
      }
    }
  }
}
</script>

  结果如下：

四、在 v-for 里使用范围值

  v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1…n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

同样，v-for也可以用在<template>元素上
不建议与v-if同时出现，因为这二者的优先级不明显

  例如，当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>