vue js v-for和css n-child

2017-09-03 82 views 0 likes

v-for似乎搞乱了元素索引。我有以下代码：vue js v-for和css n-child

<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样式。

任何帮助，将不胜感激

来源

2017-09-03 Ismail S

的jsfiddle或plunker将是有益的复制问题。 – Pradeepb

回答

.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>

来源

2017-09-04 03:47:33

非常感谢。它的工作原理 –

@IsmailS如果这个答案已经解决了你的问题，请点击复选标记考虑[接受它]（https://meta.stackexchange.com/q/5234/179419）。这向更广泛的社区表明，您已经找到了解决方案，并为答复者和您自己提供了一些声誉。没有义务这样做。 –

vue js v-for和css n-child

回答

相关问题