css伪类before渲染的问题。

Question

问题描述：

使用vue中的v-for进行列表渲染，::before伪类做一个渲染出来的item的特殊标识（用在我当前项目中为是否为mvp），在列表渲染的时候出现了一个异常的情况：在我切换日期重新渲染列表的时候,会出现两个mvp标识的情况，查看接口中的数据无误，确认不是后端的问题。

相关代码：

vue代码：

<template v-for="(win_item,index) in item.win">                                    
    <li :class="{'mvp' : win_item.is_mvp === '1'}">
        <a :href="item.url">
            <div class="img">
                <img :src="win_item.hero_head_url" alt="">
            </div>
            <span>{{win_item.game_id}}</span>
        </a>
    </li>
</template>

css代码：

&.mvp .img::before{
    content: "";
    position: absolute;
    left: -0.078125rem;
    bottom: 0;
    width: 1.34375rem;
    height: 0.296875rem;
    background: url("../../assets/images/mvp_icon.png");
    background-size: cover;
}

相关截图:

备注：

我尝试了不使用::before来进行mvp的标识，使用i标签做，可以成功解决，但想知道为什么会出现这种异常的情况。

解决的vue代码如下：

<template v-for="(win_item,index) in item.win">                                    
    <li :class="{'mvp' : win_item.is_mvp === '1'}">
        <a :href="item.url">
            <div class="img">
+                 <template v-if="win_item.is_mvp === '1'">
+                    <i></i>
+                </template>
                <img :src="win_item.hero_head_url" alt="">
            </div>
            <span>{{win_item.game_id}}</span>
        </a>
    </li>
</template>

解决的css代码如下：

-&.mvp .img::before{
-    content: "";
-    position: absolute;
-    left: -0.078125rem;
-    bottom: 0;
-    width: 1.34375rem;
-    height: 0.296875rem;
-    background: url("../../assets/images/mvp_icon.png");
-    background-size: cover;
-}


+&.mvp .img i{
+    content: "";
+    position: absolute;
+    left: -0.078125rem;
+    bottom: 0;
+    width: 1.34375rem;
+    height: 0.296875rem;
+    background: url("../../assets/images/mvp_icon.png");
+    background-size: cover;
+}

Answer 1

如果只是切换数据列表应该不会发生这个事情，感觉是其他地方存在问题。

我简单写了一个你看看：

全屏预览：http://sandbox.runjs.cn/show/...
代码编辑：http://runjs.cn/code/fqhvrqwi

不过，为什么你会把::before放在img上面？
把你的 .img 看成img了。。。

Answer 2

我遇到过类似问题，加了一个动画就好了。我猜测是因为位置没有变化引起的。问题出现在手机端的，pc端正常的