- v-for (item in items)：最基本的循环语法，可遍历数组。
- v-for (key, value in object)：遍历对象，其中 key 是属性名，value 是属性值。
条件渲染
- v-if：根据条件显示或隐藏元素，条件值为 true 时显示，false 时隐藏。
- v-else：与 v-if 配合使用，当 v-if 为 false 时显示。
范围循环
- v-for="n in 10"：遍历数字范围，从 0 到 9。
- v-for="n in 100..10"：遍历递减范围，从 100 到 10，步长为 1。
反向循环
- v-for="item in items.reverse() "：反转数组并遍历。
对象循环
- v-for="item in Object.keys(obj) "：遍历对象的键。
自定义循环变量
- v-for="(item, index) in items": 指定自定义的循环变量名，例如 index。
过滤数据
- v-for="item in items | filterBy(filterQuery) ": 根据过滤查询过滤数据。
排序数据
- v-for="item in items | orderBy("property") ": 按属性排序数据。
- v-for="item in items | orderBy("property", "desc") ": 按降序排序数据。
局部变量
- v-for="(item, index) of items": 在循环内创建局部变量。
- scoped slots：创建可重复使用的循环模板，并提供局部变量。
动态组件
- v-for="component in components": 根据动态组件列表渲染组件。
- v-bind:is="component": 绑定动态组件的名称。
高级技巧
- 门限值循环：当列表长度超过一定门限值时，使用分页或虚拟滚动。
- 异步循环：使用 async/await 处理异步数据源的循环。
- Memoization：通过缓存循环结果来提高性能。
- 尾部递归：在循环的最后调用自身以优化性能。
结论
通过掌握 Vue 循环的高级用法，开发者可以高效地操纵数据，创建复杂且响应迅速的应用程序。这些技巧使开发人员能够优化性能、满足业务需求并提供卓越的用户体验。
