Vue 动态设置css伪元素content的值，解决不渲染和渲染为数字的问题

目前的代码如下

<div class="overall-results-evaluate" :style="styleObject">
 <!--  其他代码（亦或者是使用styleObject的标签，父级有styleObject的style属性后，子级写样式时都可以使用） -->
</div>

computed: {
    styleObject () {
      return { '--fraudScoreNum': this.fraudScoreNum.toString(), '--topLeft': this.topLeft, '--bottomLeft': this.bottomLeft }
    }
  },

// 接口数据部分，赋值
this.fraudScoreNum = 55

.el-progress:before{
   position: absolute;
   top: -15px;
   content:var(--fraudScoreNum);
 }

直接的赋值为数字的话或者在computed()计算属性中去做toString()依然是不会显示的，如果你在打开控制台时看到 --fraudScoreNum 的值仍然是数字 54，而不是字符串 ‘54’，那可能是因为浏览器对于 CSS 自定义属性的处理方式导致的。

实际上，CSS 中的自定义属性不区分值的类型，即使你将其设置为字符串类型，浏览器也可以将其解析为数值类型。
所以无论你是将 --fraudScoreNum 设置为 ‘54’ 还是 54，它们都可以被解析为数值 54。

如果你想要确保 --fraudScoreNum 的值作为字符串类型传递给 content 属性，你可以在 Vue 模板中使用引号将其括起来。

computed: {
    styleObject () {
      return { '--fraudScoreNum': `'${this.fraudScoreNum}'`, '--topLeft': this.topLeft, '--bottomLeft': this.bottomLeft }
    }
  },

其他为数字类型的不影响，仅为字符串类型的样式需要如此