效果
源代码
<template>
<div class="divClass">
<!-- 使用集合形式,style则对应集合,当前可应用于redClass中 -->
<div :style="divStyle" class="redClass"></div>
<!-- 使用单个变量,style则对应单个, 当前可应用于blueClass中-->
<div :style="{'--blueColor': blueColor}" class="blueClass"></div>
</div>
</template>
<script>
export default {
data() {
return {
//创建divStyle对象集合
divStyle: {
"--redColor": "red"
},
// 创建单个样式变量
blueColor: "blue"
};
}
};
</script>
<style lang="scss" scoped>
// 画一个蓝圈圈
.blueClass {
border: 1px solid var(--blueColor);
border-radius: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
line-height: 40px;
text-align: center;
color: #fff;
}
// 画一个红圈圈
.redClass {
border: 1px solid var(--redColor);
border-radius: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
line-height: 40px;
text-align: center;
color: #fff;
}
.divClass {
display: flex;
margin-top: 10%;
justify-content: space-evenly;
}
</style>
解说
- 在vue中我们需要抽离变量当样式,我们使用变量来进行操作
- 绑定style样式,我们就可以在class中进行赋值了
- 如果绑定了集合,我们则直接使用var(key值) 即可
- 如果绑定了变量,我们则在绑定的style中创造集合,将变量当value值放进去即可, 在style中和3一样的哦,都要使用var(key值)