vue中动态修改style(修改伪元素样式)，样式中使用data里面的数据

需求

伪元素高度使用data中的变量，对其进行动态修改

实现

1. css/less中使用变量的方式

声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分

2. 根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置

<template>
    <div class="test">
        <span :style="{'--width': widthVar}" class="span">hello earth</span>
        <button @click="changeWidth">改变宽度</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            widthVar: "100px"
        };
    },
    methods:{
    	changeWidth(){
    		this.widthVar = '200px'
    	}
    }
}
</script>
<style scoped>
    .span {
        text-align: center;
        position: relative;
        width: var(--width);
    }
    .span::after {
        content: '';
        display: block;
        position: absolute;
        left: 100%; 
        width: var(--width);
        height: var(--width);
        border-radius: 50%;
        border: 2px solid black;      
    }
</style>

点此查看修改循环出来的板块中某个板块下伪元素样式的修改