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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  结果如下：

二、维护状态

  当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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

三、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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

  结果如下：

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

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

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

同样，v-for也可以用在