vue3-列表渲染

v-for

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

• v-for 指令的值需要使用 (item in items) 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名，

• (item, index) in items index 表示当前项的位置索引(可选参数)

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

1. 形式一

v-for="item in items"

1. 形式二

v-for="(item, index) in items"

• 主流电脑系统有 win 和 mac 和 linux

import { ref } from "vue"

const system = ref('电脑系统')
const items = ref([{ platform: 'win' }, { platform: 'mac' }, { platform: 'linux' }])






.container {}

• 示例

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

  {{ message }}




  {{ message }} {{ index }}

• 对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

  
    {{ item.message }} {{ childItem }}
  

v-for 与对象

• 你也可以使用 v-for 来遍历一个对象的所有属性。

• 遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})


  
    {{ value }}
  

• 可以通过提供第二个参数表示属性名 (例如 key)：

  {{ key }}: {{ value }}

第三个参数表示位置索引：

  {{ index }}. {{ key }}: {{ value }}

在 v-for 里使用范围值

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

{{ n }}

注意此处 n 的初值是从 1 开始而非 0。