速救,Vue怎么动态改变元素伪类的效果

Question

<div v-show="isShow" class="filter">

        <view class="txt" @tap="getTaskList('time',sort)"><span>1</span></view>
        <view class="txt" @tap="getTaskList('money',sort)" ><span>2</span></view>
        <view class="txt" @tap="getTaskList('number',sort)"><span>3</span></view>

</div>

css:

.filter span:before{

     width: 0;
     content: '';
     position: absolute;
     left: 90upx;
     top: 12upx;
     border-left: 6upx solid transparent;
     border-right: 6upx solid transparent;
     border-bottom: 6upx solid #686B6E;
}
.filter span:after{
     width: 0;
     content: '';
     position: absolute;
     bottom: 10upx;
     left: 90upx;
     border-left: 6upx solid transparent;
     border-right: 6upx solid transparent;
     border-top: 6upx solid #686B6E;
}

点击切换这种效果怎么做

Answer 1

改txt的class啊
然后用新增样式的after, before覆盖前面的样式

Answer 2

希望能帮到你

Answer 3

给view加一个class点击切换不同class名,再用新增的class修改span的after,before用来覆盖之前的样式

Answer 4

将before和after使用span或者div来代替，如下

<div class="analistis-body">
    <!--analistis-body:before由下面span代替-->
      <span class="analistis-body-before" :style="{ 'left': '350px'}"></span>
      <div class="analistis-box"></div>
    <!--analistis-after由下面span代替-->
      <span class="analistis-body-after" :style="{ 'left': '350px'}"></span>
</div>