[Mise] Iterate through data with the `x-for` attribute in Alpine JS
2021-03-07 06:27
标签：init about think name code apply === this app In this lesson, we move the component definition to a function, defined in a script tag in the HTML document. We then iterate through an Array of Objects with the We also define a "computed" property by adding a method on our function, which checks if a given ID matched the currently active tab id. This computed property allows us to determine wether or not to apply the "active" classname to our tab buttons. [Mise] Iterate through data with the `x-for` attribute in Alpine JS 标签：init about think name code apply === this app 原文地址：https://www.cnblogs.com/Answer1215/p/12890640.htmlx-for directive in Alpine JS. We use a tag to wrap the HTML element we want to repeat for each item, and put the x-for directive on that template tag.div x-data="tabs()">
div>
template x-for="tab in tabs" :key="tab.id">
button @click="activeTab = tab.id" x-text="tab.title" :class="{‘active‘: getActiveStatus(tab.id)}">button>
template>
div>
div>
template x-for="tab in tabs" :key="tab.id">
div x-show="getActiveStatus(tab.id)">
p x-text="tab.text">p>
div>
template>
div>
div>
script>
function tabs() {
return {
activeTab: 0,
tabs: [
{id: 0, title: "Tab 1", text: "I am the content of tab number one, and I think I just won! ??"},
{id: 1, title: "Tab 2", text: "Heya! I root for number two, and so should you! ??"},
{id: 2, title: "Tab 3", text: "Haha nice one, but I am number three, and now it‘s all about me! ??"},
],
getActiveStatus(id) { return this.activeTab === id }
}
}
script>
下一篇：css 多行隐藏
文章标题：[Mise] Iterate through data with the `x-for` attribute in Alpine JS
文章链接：http://soscw.com/index.php/essay/61213.html