动态修改伪类内容

小程序  和 h5都可以用,  这边就以小程序为例子,   39 左右两边都是 伪类元素

利用html中的data-attr


 

 home.wxml  (好比 html)

<!-- 开通+送他卡片 -->
    <view class="kai-song">
      <view class="title">番茄生活VIP权益卡</view>
      <view class="redFont">首次购买</view>
      <view class="money" data-attr="原价: ¥{{oldPrice}}">39</view>
    </view>

home.wxss  (好比 css)

.kai-song>.money{
  color: #FF5454;
  font-size: 72rpx;
  position: relative;
  display: inline-block
}
.kai-song>.money:before{
  position: absolute;
  font-size: 28rpx;
  content: '¥';       //这边写死的  before伪类
  left: -25rpx;
  bottom: 11rpx;   
  color: #FF5454;
}
.kai-song>.money:after{
  position: absolute;
  font-size: 16rpx;
  content: attr(data-attr);   //动态获取的after伪类
  right: -85rpx;
  bottom: 10rpx;   
  color: #999999;
  text-decoration: line-through
}

home.js

data: {

    oldPrice: 190,//原价
  },

 

 

html/css参考链接:https://www.cnblogs.com/giserjobs/p/11980013.html