vue中动态给dom元素添加伪元素?

  • Z时代
  • 2024-03-15
  • 分类：IT

例如某些情况下，这个元素的dom的before才会出现，而且before里面的css的长度高度或者其他元素也是无法确定的
原本考虑在css中写下这个伪元素的css代码，然后控制dom的class，但是伪元素不能写死在css里面，因为它里面也有动态参数，通过用户的某些行为是需要改变的

回答：

对于动态控制伪元素样式的解决方法之一：CSS变量。

// template
<div class="exp" :style="{'--border-color': flag?'red':'blue'}"> <div>
// style
.exp{
    --border-color: green;
    border-color: var(--border-color);
}

回答：

可以使用css变量，把变量绑定到元素上，然后在伪元素上使用。

如果不支持css变量，那么需要改变html结构去实现，如果是一些可继承的属性，可以设置在元素上，继承给伪元素或子元素

以上是 vue中动态给dom元素添加伪元素? 的全部内容， 来源链接： utcz.com/p/935024.html

回到顶部