在我的vue-app 中，我想在v-for-loop 中添加一個元素。所以我嘗試這樣做：
<li v-for="(slide, index) in slides" :key="index"
:class="slideIndex === index ? 'active' : ''"
@click="slideIndex = index"
>
{{ slide.nodeName }}
</li>
<li class="cursor-pointer item" v-if="slides.length === 5">foobar</li>
但這不會將“新”項保留在索引內，例如我希望元素位于回圈內。
我該如何解決？
uj5u.com熱心網友回復：
你的意思是如果slides.length === 5，然后<li>在每個<li>標簽后添加你的第二個標簽？如果是，請看下面的代碼
<template v-for="(slide, index) in slides">
<li
:key="slide.nodeName"
:class="slideIndex === index ? 'active' : ''"
@click="slideIndex = index"
>
{{ slide.nodeName }}
</li>
<li
:key="`${slide.nodeName}_${index}`"
class="cursor-pointer item"
v-if="slides.length === 5"
>
foobar
</li>
</template>
請注意<li>同級標簽的鍵值系結
uj5u.com熱心網友回復：
要將元素包含在 中其他元素的回圈中vue.js，您需要將它們包含在它們的標簽中。你的情況，你需要知道的，是嵌套<li>入<li>可能會導致問題。嘗試這個：
<li v-for="(slide, index) in slides" :key="index"
:class="slideIndex === index ? 'active' : ''"
@click="slideIndex = index"
>
{{ slide.nodeName }}
<ul v-if="slides.length === 5">
<li class="cursor-pointer item">foobar</li>
</ul>
</li>
由于回圈位于您的第一個<li>元素上，因此該元素之間<li>和之間</li>的所有內容都將包含在回圈中。我為嵌套串列添加了<ul>大約第二個<li>。
編輯：<li>如果有 5 個幻燈片，則渲染第二個slides
所以現在我想知道你想要實作什么，讓我們嘗試解決它。第二個<li>必須在 5 個回圈完成后渲染/如果slides.
首先，您需要注意，v-if="slides.length === 5"只有在正好有 5 張幻燈片時才匹配。因此，如果您現在提供slides.length大于 5 或??小于 5 的東西<li>，foobar則不顯示。改為v-if="slides.length > 5"改為。如果只在IS 5 時顯示<li>with ，那么您的代碼正在正常作業。foobarlength
但是，如果你嘗試添加<li>與foobar后5個專案甚至每5個專案，你可以使用這個小竅門：
<ul>
<span v-for="(slide, index) in slides" :key="index">
<li :class="slideIndex === index ? 'active' : ''"
@click="slideIndex = index"
>
{{ slide.nodeName }}
</li>
<li class="cursor-pointer item" v-if="(index 1)%5 === 0">foobar</li>
</span>
</ul>
你不應該包括<span>in <ul>，但它應該可以作業。現在，兩個回圈運行<li>的元素，但<li>與foobar僅在每個第五元素之后呈現，由于v-if="(index 1)%5 === 0"。
希望這對你有幫助。
uj5u.com熱心網友回復：
<el-row v-for="item in queryFolderList" :key="item.id">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-button-group>
<el-button type="primary" size="mini" @click="goToDetil(item.id)"
>{{ item.id }}</el-button
>
<el-button type="warning" size="mini" @click="submit(item.id)"
>{{ item.name}}</el-button
>
</el-button-group>
</el-col>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328303.html
標籤：javascript Vue.js