[JavaScript知识库]vue学习-列表渲染

1. 遍历数组

可以使用of或者in作为分隔符

users为源数据数据

第一个参数user为别名（{id: '#0', name: 'a'}...）

（选用）第二个参数index为索引名

user，index可以自行取名

<template>
  <div v-for="(user,index) of users" :key="index">{{user}}</div>
  <hr>
  <div v-for="(user,index) in users" :key="index">{{user}}</div>
</template>

-------------------------------------------------------------

data() {
  return {
    users: [
      {id: '#0', name: 'a'},
      {id: '#1', name: 'b'},
      {id: '#2', name: 'c'},
    ]
  }
}

2. 遍历对象

同样可以使用in或者of

person为源数据数据

第一个参数value为别名，对象属性的值（tom，2，10）

（选用）第二个参数key为对象属性名(name，age，weight)

（选用）第三个参数（选用）为索引名

value，key，index可以自行取名

在遍历对象时，会按?Object.keys()?的结果遍历，但是不能保证它在不同 JavaScript 引擎下的结果都一致

<div v-for="(value, key, index) in person" :key="key">{{index}}-{{key}}:{{value}}</div>

-----------------------------------------------------

data() {
  return {
    person: {
      name: 'tom',
      age: 2,
      weight: 10
    }
  }
}

3. :key="XXX"

key的取值：number | string | symbol

key?特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示，以在比对新旧节点组时辨识 VNodes。如果不使用 key，Vue 会使用一种算法来最小化元素的移动并且尽可能尝试就地修改/复用相同类型元素。而使用 key 时，它会基于 key 的顺序变化重新排列元素，并且那些使用了已经不存在的 key 的元素将会被移除/销毁

4. 数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

以上7个也是js数组方法中会改变原数组的方法

不改变原数组的方法，如filter，需要将生成的新数组重新赋值给被侦听的数组，才会触发视图更新

5.显示过滤/排序后的结果?

Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作?

用计算属性过滤：

<div v-for="(user, index) of biger5" :key="index">{{ user }}</div>

---------------------------------------------------------

data() {
  return {
    users: [
      { id: "#0", name: "a", age: 5 },
      { id: "#1", name: "b", age: 10 },
      { id: "#2", name: "c", age: 15 },
    ],
  };
},
computed: {
  biger5() {
    return this.users.filter((value) => value.age > 5);
  },
},

?

?在计算属性不适用的情况下 (例如，在嵌套?v-for?循环中) 你可以使用一个方法：

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)" :key="n">{{ n }}</li>
</ul>

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

6. 在?v-for?里使用值的范围

直接重复这个元素3次。n为1，2，3

<div v-for="n of 3" :key="n">{{ n }}</div>

7.?在组件上使用?v-for

可以在自定义组件使用v-for，但是迭代数据传递到组件里，我们要使用 props

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>