vue修改css属性,vue中定义变量
本文主要介绍vue如何使用CSS自定义变量，帮助人们更好地理解和学习使用Vue框架。感兴趣的朋友可以了解一下。
目录
在css自定义变量中使用已久，但在实际开发中使用并不广泛。原因是less、sass等前处理器已经有了定义变量的功能，Vue、react方便设置样式。你可能觉得用css定义变量不方便，没必要。其实就举个最直观的栗子吧：“如何用vue设置伪类伪元素的样式”。这是一个百年问题，大部分人可能通过修改类名来解决。但是如果要修改的样式很多，或者想通过不同的数据呈现不同的样式，怎么办？我今天就直接解决这个问题。我们先来了解一下什么是css自定义变量。简单使用：
风格
部门{
-BG-颜色：粉色；//定义变量
color:var(-BG-color)//通过var函数使用变量
}
/风格
divhello/div
你会得到一个粉红色的问候。父类中定义的变量也可以被子类和它们的伪类伪元素使用。
风格
部门{
-BG-颜色：粉色；//定义变量
颜色：var(-BG-color)；//通过var函数使用变量
}
div:悬停{
背景色：var(-BG-color)；
}
分区跨度{
背景色：var(-BG-color)；
}
/风格
divhello spanworld/span /div
var函数也可以设置一个默认值，在找不到自定义变量的时候也可以设置一个默认值。
风格
部门{
颜色：var( - bg色，粉色)；//第二个参数是默认值
背景色：var( - bg-color，-color，- a，红色)；//甚至可以设置多个变量，从左到右搜索。
}
/风格
divhello/div
到目前为止，已经引入了css自定义变量。我们来看看它在vue中的使用情况。您可以在标签的style属性中设置它的变量值。
模板
div class= box @ click= change color :style= { -a :a } hello/div
/模板
导出默认值{
data(){
返回{
答：“蓝色”，
}
},
方法：{
changeColor(){
this.a=this.a===蓝？红色:蓝色
}
}
}
/脚本
风格。方框{
颜色：var(-a)；
}。框：悬停{
背景色：var(-a)；
}
/风格
div的字体颜色和悬停的背景颜色会直接改变。此时你会发现，通过自定义css变量，可以很容易地修改它们的样式，直接修改它们伪类的属性。因为子元素可以共享父元素的自定义变量，所以您可以在子组件中直接使用父元素自己的变量。
//父组件
模板
div class= box :style= { -a :a } hello Child/Child/div
/模板
导出默认值{
组件：{
儿童
},
data(){
返回{
答：“蓝色”，
}
}
}
/脚本
//子组件Child
模板
spanworld/span
/模板
style lang=less
跨度{
颜色：var( -颜色)；
}
/风格
试试amazing，这样我们就可以在父组件修改状态时改变子组件的样式，绕过子父组件的值传递。注意：子组件必须安装在可以应用变量的作用域类中。
从上面的栗子可以看出，定义变量很方便。为了方便起见，可以通过vue自定义命令设置变量。
//vue3自定义指令。
功能更改(el，绑定){
for(let [key，value]of object . entries(binding . value)){
el.style.setProperty( - key，value)；
}
}
app.directive(css，{
已安装(el，装订){
变化(el，绑定)
}
已更新(el，绑定){
变化(el，绑定)
}
})
注意，使用el.style [-color]= red 修改css变量是无效的，必须用style.setProperty api设置。注册指令后，我们可以。
模板
div v-css={a，b } class= box @ click= change color /div
/模板
导出默认值{
data(){
返回{
答：“蓝色”，
粉红色
}
},
方法：{
changeColor(){
this.a=this.a===蓝？红色:蓝色
this.b=this.b===粉红？黄色:粉色
}
}
}
/脚本
风格。方框{
宽度：100px
高度：100px
背景色：var(-a)；
}。框：悬停{
背景色：var(-b)；
}
/风格
大大方便了vue对style风格的操作。
在此基础上，我做了一些优化和扩展，开了一个工具，发表在npm上。地址www.npmjs.com/package/vue.欢迎大家下载体验，喜欢的可以上星。
以上是Vue如何使用CSS自定义变量的细节。更多关于Vue使用CSS自定义变量的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。