Skip to content

Latest commit

 

History

History
102 lines (74 loc) · 2.37 KB

遍历 x-for a0bf2dd9c90a4965a1b748d72811ca71.md

File metadata and controls

102 lines (74 loc) · 2.37 KB

遍历: x-for

Alpine 的**x-for**指令允许你通过遍历列表的方式来创建 DOM 元素。这里有一个简单的例子，使用它来创建一个基于数组的颜色列表。

<ul x-data="{ colors: ['红', '橙', '黄'] }">
    <template x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>

关于**x-for**指令有两个规则值得注意：

**x-for必须在<template>元素上声明 该<template>**元素必须只有一个子元素

键

如果你要对项目进行重新排序，那么为每个**x-for**遍历的数据指定唯一的键是很重要的。如果没有唯一的键，Alpine 可能很难跟踪哪些内容重新排序了，并会导致奇怪的错误。

<ul x-data="{ colors: [
    { id: 1, label: '红' },
    { id: 2, label: '橙' },
    { id: 3, label: '黄' },
]}">
    <template x-for="color in colors" :key="color.id">
        <li x-text="color.label"></li>
    </template>
</ul>

现在，如果**colors**被添加，删除，重新排序，或者它们的**id** 发生变化，Alpine 将会相应的保留或销毁遍历的**<li>**元素。

访问索引

如果你需要访问遍历的每一项的索引，你可以使用**([item], [index]) in [items]**语法，如下所示：

<ul x-data="{ colors: ['红', '橙', '黄'] }">
    <template x-for="(color, index) in colors">
        <li>
            <span x-text="index + ': '"></span>
            <span x-text="color"></span>
        </li>
    </template>
</ul>

你也可以通过**:key**来指定表达式中的索引。

<template x-for="(color, index) in colors" :key="index">

循环

如果你只是想简单地循环**n**次，而不是遍历数组，Alpine 提供了一个简短的语法。

<ul>
    <template x-for="i in 10">
        <li x-text="i"></li>
    </template>
</ul>

**i**在这种情况下可以命名为任何合法的变量名。

的内容

如上所述，**<template>**标签只能包含一个子元素。

例如，下面的代码将不起作用：

<template x-for="color in colors">
    <span>下一个颜色是</span><span x-text="color">
</template>

但这段代码会起作用：

<template x-for="color in colors">
    <p>
        <span>下一个颜色是</span><span x-text="color">
    </p>
</template>