css伪类before渲染的问题。

我可是兔子
  • 369

问题描述:

使用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;
}

相关截图:

上面一个是正常渲染的情况,下面一个是渲染错误的情况

这是渲染出来的dom结构

备注:

我尝试了不使用::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;
+}
回复
阅读 4.5k
2 个回答
testnullundefine
  • 2.4k

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

我简单写了一个你看看:

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

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

月影
  • 2.7k

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏