vue组件利⽤cssvar（--变量）实现动态修改伪类属性（：：before、：：
after）
如图所⽰：
#1：
我们可以利⽤此属性实现vue组件动态传值，修改例如：::before、::after等，伪类的背景⾊，背景图等属性值。
因为vue利⽤⽆法直接在css中使⽤data⾥的变量，利⽤var(–变量名)，以及style中定义变量（其实此步是模仿:root{}）⽅能修改。
动态切换主题也可利⽤此⽅式实现，由后端返回图⽚地址，以及颜⾊主题。
#2：
常规使⽤⽅式，但是很尴尬，⼈们并不喜欢这样写。
只有系统性，需要⼤量修改重复css属性，才会⽤到这个。
代码如下：（复制另存txt，修改.html直接运⾏）
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<title>vue组件利⽤css var(--变量)实现动态修改伪类属性（::before、::after）</title>
<!--引⼊样式-->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
<style>
:root {
--main-bg-color: #eee;/* 重要（#2 配对使⽤） #2*/
}
.bodyCss {
background:var(--main-bg-color);/* 重要（#2 配对使⽤） #2*/
}
.bodyCss .cardBox{
font-size:16px;
margin:012px 12px 12px;
background: #ffffff;
border-radius:8px;
padding:15px;
box-sizing: border-box;
text-align: left;
}
.
bodyCss .cardBox .titleBox{
display: flex;
justify-content: space-between;
align-items: center;
}
.bodyCss .cardBox .titleBox .title{
font-size:16px;
color: #333;
font-weight: bold;
display: flex;
align-items: center;
}
.bodyCss .cardBox .titleBox .title::before{
content:'';
width:3px;
css变量height:14px;
margin:2px 10px 00;
display: block;
background:var(--bgColor);/* 重要（#1 配对使⽤） #1*/
border-radius:2px;
}
</style>
</head>
<body class="bodyCss">
<div id="app" >
<el-radio-group v-model="bgColor" >
<el-radio-button label="#00f">#00f</el-radio-button>
<el-radio-button label="#f00">#f00</el-radio-button>
<el-radio-button label="#ff0">#ff0</el-radio-button>
<el-radio-button label="#0f0">#0f0</el-radio-button>
</el-radio-group>
<div class="cardBox">
<div class="titleBox">
<div class="title":><!--重要（#1配对使⽤） #1-->
<span :>动态修改伪类样式</span>
</div>
<span>></span>
</div>
<div>
<p>#1：</p>
<p>我们可以利⽤此属性实现vue组件动态传值，修改例如：::before、::after等，伪类的背景⾊，背景图等属性值。</p>
<p>因为vue利⽤⽆法直接在css中使⽤data⾥的变量，利⽤var(--变量名)，以及style中定义变量（其实此步是模仿:root{}）⽅能修改。</p> <p>动态切换主题也可利⽤此⽅式实现，由后端返回图⽚地址，以及颜⾊主题。</p>
<p>#2：</p>
<p>常规使⽤⽅式，但是很尴尬，⼈们并不喜欢这样写。</p>
<p>常规使⽤⽅式，但是很尴尬，⼈们并不喜欢这样写。</p>
<p>只有系统性，需要⼤量修改重复css属性，才会⽤到这个</p>
</div>
</div>
</div>
</body>
<script src="unpkg/vue/dist/vue.js"></script>
<!--引⼊组件库-->
<script src="unpkg/element-ui/lib/index.js"></script>
<!--引⼊ echart -->
<script src="lib.baomitu/echarts/5.2.0/echartsmon.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
bgColor:'#19AEF7',
}
},
mounted(){
},
methods:{
}
})
</script>
</html>
番外篇：
要过年了，没有了鞭炮，却来了疫情，晨起动征铎，客⾏悲故乡。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。