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的{{1}}，因此它实际上围绕每个.grid创建了一个容器，因此没有.grid元素是第二个子元素。我想你可能真的想要v-for元素上的.grid。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Vue js v-for和css nth-child

1 个答案: