vue js v-for和css n-child

Question

v-for似乎搞亂了元素索引。我有以下代碼：

<style> 
@media (min-width: 768px) and (max-width: 1199px) { 
.grid:nth-child(2) { 
clear: left; 
background-color: gray; 
border: 1px solid yellow; 
} 
} 
</style> 

然後在我的代碼：

<div v-for="n in posts"> 
<div class="grid">{{n}}</div> 
</div> 

這裏的孩子2不存在。僅在指定了子項1時應用CSS樣式。

任何幫助，將不勝感激

Answer 1

.grid:nth-child(2)意味着每個.grid元素是它的父的第二個孩子。但由於您的v-for在包含div上，因此它實際上在每個.grid周圍創建一個容器，因此沒有.grid元素是第二個孩子。我想你可能實際上想.grid元素上的v-for。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     posts: [1,2,3,4,5] 
 
    } 
 
    }, 
 
});

.grid:nth-child(2) { 
 
clear: left; 
 
background-color: gray; 
 
border: 1px solid yellow; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <div class="grid" v-for="n in posts">{{n}}</div> 
 
</div>