动态绑定实现改变伪元素等样式attr( data-number)

情景三：动态绑定实现改变伪元素等样式
描述：以上样式都是我们最普通的样式，但是我们如何通过绑定样式改变伪元素（::before、::after）、激活、滑入等复杂的样式呢？看下下面的示例吧：

<template>
   <div class="rd-flop">
       <div class="rd-clock-card" v-if="currData" ref="rdFlop">
           <div
               class="flip"
               :style="{
                   width: width,
                   height: height,
                   lineHeight: lineHeight,
                   margin: margin,
                   fontSize: `${fontSize}px`,
                   fontWeight: fontWeight,
                   border: border,
                   borderRadius: `${borderRadius}px`,
                   boxShadow: boxShadow,
                   '--threeColumnMargin': threeColumnMargin,
               }"
               v-for="(item, index) in currValue.length"
               :key="index"
           >
               <div
                   class="digital front"
                   :style="{
                       '--pseudoElementColor': pseudoElementColor,
                       '--pseudoElementBg': pseudoElementBg,
                       '--pseudoElementBorder': pseudoElementBorder,
                       '--pseudoElementTopBorderRadius': pseudoElementTopBorderRadius,
                       '--pseudoElementBotBorderRadius': pseudoElementBotBorderRadius,
                       '--pseudoElementBoxShadow': pseudoElementBoxShadow,
                   }"
                   data-number="0"
               ></div>
               <div
                   class="digital back"
                   :style="{
                       '--pseudoElementColor': pseudoElementColor,
                       '--pseudoElementBg': pseudoElementBg,
                       '--pseudoElementBorder': pseudoElementBorder,
                       '--pseudoElementTopBorderRadius': pseudoElementTopBorderRadius,
                       '--pseudoElementBotBorderRadius': pseudoElementBotBorderRadius,
                       '--pseudoElementBoxShadow': pseudoElementBoxShadow,
                   }"
                   data-number="1"
               ></div>
           </div>
       </div>
       <p :style="{ margin: titleMargin, fontSize: `${titleFontSize}px` }">
           {{ category }}
       </p>
   </div>
</template>

<script>
export default {
   name: '',
   props: {
       title: String, // 标题
       width: { type: String, default: '36px' }, // 宽度
       height: { type: String, default: '46px' }, // 高度
       lineHeight: { type: String, default: '46px' }, // 高度
       margin: { type: String, default: '2px' }, // 间距
       threeColumnMargin: { type: String, default: '5px 30px 5px 5px' }, // 第三列间距（数字三个一组）
       fontSize: { type: Number, default: 16 }, // 字体大小
       fontWeight: { type: Number, default: 900 }, // 字体加粗（100-500为不加粗，600-900加粗）
       border: { type: String, default: '1px solid transparent' }, // 边框
       borderRadius: { type: Number, default: 0 }, // 圆角
       boxShadow: { type: String, default: '0 0 6px rgba(0, 0, 0, 0.5)' }, // 容器阴影
       pseudoElementColor: { type: String, default: '#fff' }, // 伪元素字体颜色
       pseudoElementBg: { type: String, default: '#3354e2' }, // 伪元素背景
       pseudoElementBorder: { type: String, default: '1px solid #666' }, // 伪元素边框
       pseudoElementTopBorderRadius: { type: String, default: '0 0 0 0' }, // 伪元素上半部分圆角
       pseudoElementBotBorderRadius: { type: String, default: '0 0 0 0' }, // 伪元素下半部分圆角
       pseudoElementBoxShadow: {
           type: String,
           default: '0 -2px 6px rgba(255, 255, 255, 0.3)',
       }, // 伪元素容器阴影
       titleMargin: { type: String, default: '20px 0 0 0' }, // 标题间距
       titleFontSize: {
           type: Number,
           default: 30,
       }, // 标题字体大小
   },
};
</script>

<style scoped>
.rd-clock-card .flip .digital::before,
.rd-clock-card .flip .digital::after {
   position: absolute;
   content: attr(data-number);
   left: 0;
   right: 0;
   color: var(--pseudoElementColor);
   background: var(--pseudoElementBg);
   overflow: hidden;
   perspective: 160px;
}

.flip:nth-of-type(3n) {
   margin: var(--threeColumnMargin) !important;
}

.rd-clock-card .flip .digital::before {
   top: 0;
   bottom: 50%;
   border-bottom: var(--pseudoElementBorder);
   border-radius: var(--pseudoElementTopBorderRadius);
}

.rd-clock-card .flip .digital::after {
   top: 50%;
   bottom: 0;
   line-height: 0;
   border-radius: var(--pseudoElementBotBorderRadius);
}

.rd-clock-card .flip.running .front::before {
   transform-origin: center bottom;
   animation: frontFlipDown 1s ease-in-out;
   box-shadow: var(--pseudoElementBoxShadow);
   backface-visibility: hidden;
}
</style>