列表渲染指令v-for · uni-app跨平台移动应用开发

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

玩手机的数据线 · 中央企业科技创新成果产品手册（2022年版）· 2 月前 ·

面冷心慈的仙人球 · mysql正则表达式匹配汉字 - CSDN文库· 3 月前 ·

犯傻的小蝌蚪 · 南非高校：“总统刺激就业计划”对降低该国失业 ...· 10 月前 ·

斯文的跑步机 · 基于数字孪生的工艺设计与优化_产品_模型_虚拟· 1 年前 ·

傲视众生的佛珠 · Traccar 记录你的足迹 - 知乎· 1 年前 ·

## 列表渲染指令v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。v-for 还支持一个可选的第二个参数index为当前项的索引。为了能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id，它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值。 > uni-app中嵌套列表渲染，必须指定不同的索引！需要填写:key="xx"，或者v-bind:key=”xx”。以下的示例演示了如何结合v-show指令和v-for指令条件输出，并使用Flex布局生成表格输出。 > 本例演示了Flex布局的垂直居中和水平居中，表格的每一列占屏幕宽度的1/3。 * [ ] pages/lab/gramma/vfor.vue ![](https://box.kancloud.cn/062e94705309cd1273dcf2b4acfa2d7a_914x779.png) ### [key](https://uniapp.dcloud.io/use?id=key) 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如``中的输入内容，``的选中状态），需要使用`:key`来指定列表中项目的唯一的标识符。 `:key`的值以两种形式提供 * 使用`v-for`循环`array`中`item`的某个`property`，该`property`的值需要是列表中唯一的字符串或数字，且不能动态改变。 * 使用`v-for`循环中`item`本身，这时需要`item`本身是一个唯一的字符串或者数字当数据改变触发渲染层重新渲染的时候，会校正带有`key`的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。 **如不提供`:key`，会报一个`warning`，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。** **示例：**

EcmaScript基础

常量与变量

函数的基本概念

while循环

for循环

对象的方法

变量作用域

map/reduce

filter

Promise

Arguments 对象

Map和Set