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

需求

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

实现

css/less中使用变量的方式

声明css变量的时候，变量名前面要加两根连词线（–）。

变量名大小写敏感，–header-color和–Header-Color是两个不同变量。

var()函数用于读取变量。

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

第二个参数不处理内部的逗号或空格，都视作参数的一部分

根据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>

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