列表渲染

官方中文网站：列表渲染 | Vue.js (vuejs.org)

---

---

v-for

---

    我们可以使用 v-for 指令基于一个数组来渲染一个列表。

    v-for 指令的值需要使用 item in items 形式的特殊语法，

    其中 items 是源数据的数组，而 item 是迭代项的别名：
  

演示代码：

     js 代码：

         const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
  

     template 代码：

        <li v-for="item in items">
          {
 { item.message }}
        </li>

     演示结果：

• Foo
• Bar

---

    在 v-for 块中可以完整地访问父作用域内的属性和变量。

    v-for也支持使用可选的第二个参数表示当前项的位置索引。

  

演示代码：

     js 代码：

        const parentMessage = ref('Parent')
        const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
  

     template 代码：

        <li v-for="(item, index) in items">
            {
 { parentMessage }} - {
 { index }} - {
 { item.message }}
        </li>

     演示结果：

• Parent - 0 - Foo
• Parent - 1 - Bar

---

    v-for 变量的作用域和下面的 JavaScript 代码很类似：

  

演示代码：

     js 代码：

        const parentMessage = ref('Parent')
        const items = [
                          /* ... */
                            { message: 'Foo' },
                            { message: 'Bar' }
                      ]
  

     console.log 代码：

        items.forEach((item, index) => {
        // 可以访问外层的 `parentMessage`
        // 而 `item` 和 `index` 只在这个作用域可用
        console.log(parentMessage, item.message, index)
        })

     演示结果：

• RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: false, _rawValue: 'Parent', _value: 'Parent'} 'Foo' 0
• RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: false, _rawValue: 'Parent', _value: 'Parent'} 'Bar' 1

---

  注意 v-for 是如何对应 forEach 回调的函数签名的。

  实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：

  

演示代码：

     js 代码：

         const parentMessage = ref('Parent')
         const items = [
                          /* ... */
                            { message: 'Foo' },
                            { message: 'Bar' }
                       ]
  

     template 代码：

         <li v-for="{ message } in items">
                {
 { message }}
         </li>
         <!-- 有 index 索引时 -->
         <li v-for="({ message }, index) in items">
                 {
 { message }} {
 { index }}
         </li>

     演示结果：

• Foo
• Bar
• Foo 0
• Bar 1

---

  对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。

  每个 v-for 作用域都可以访问到父级作用域：

  

演示代码：

     js 代码：

         const items=[
                          { message: 'Hello', children: ['A', 'B', 'C'] },
                          { message: 'World', children: ['X', 'Y', 'Z'] }
                      ]
  

     template 代码：

         <li v-for="item in items">