vue在style样式中的变量,vue里怎么改变标签的css属性
在vue项目中，我们可以通过内联样式动态修改样式。下面这篇文章主要介绍在vue中如何使用定义变量设置css样式的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
前言实现第一种情况和第二种情况。语法方法一、方法二小结
前言
在处理项目时，您通常会遇到将变量绑定到HTML标签来设置样式的需要。这种需求有两种情况。
实现
第一种情况
如果是针对代码中实际存在的HTML标签，我们可以直接绑定变量来设置样式，比如改变表格的边框。
首先，设置一个表格边框样式的JS变量(table_border)。然后在HTML标签的style属性上绑定JS变量。模板
div class=应用程序容器
模板
el表
:data=tableData
:style=table_border
El-表格-列
prop=date
标签=日期
宽度=180
/
El-表格-列
prop=name
Label= name
宽度=180
/
El-表格-列
prop=地址
Label=地址
/
/el-table
/模板
/div
/模板
脚本
导出默认值{
data() {
返回{
//表格数据
表数据：[{
日期：“2016年5月2日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月4日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1517弄”
}, {
日期：“2016年5月1日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1519弄”
}, {
日期：“2016年5月3日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1516弄”
}],
Table _ border: border: 1px纯红//设置表格边框样式
}
}
}
/脚本
效果如下：
第二种情况
如果我想手动更改表头的边框颜色，有时候因为UI框架的一些组件是打包的，所以无法直接在实际的HTML标签代码中设置。这时候就需要在css中设置了，那么如何在css中使用变量呢？
语法
首先，我们必须弄清楚如何在css中声明一个css变量，如下所示：
颜色：红色
如何使用这个css变量如下：类名{
颜色：var( -颜色)
}
方法一
基于以上语法，我们可以设置表头的边框，如下所示：
首先设置样式，一个表格边框样式的JS变量(table_border)和一个表头边框样式的JS变量(table_header_border)。然后在computed中定义一个参数(setStyles)，它的返回值是css样式集。其中键是css变量名，值是css样式属性值。将此参数(setStyles)绑定到HTML标记的Style属性。最后，在style中使用它，找到需要改变或设置样式的HTML标签的className，绑定css变量。模板
div class=应用程序容器
模板
el表
:data=tableData
:style=setStyles
El-表格-列
prop=date
标签=日期
宽度=180
/
El-表格-列
prop=name
Label= name
宽度=180
/
El-表格-列
prop=地址
Label=地址
/
/el-table
/模板
/div
/模板
脚本
导出默认值{
data() {
返回{
//表格数据
表数据：[{
日期：“2016年5月2日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月4日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1517弄”
}, {
日期：“2016年5月1日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1519弄”
}, {
日期：“2016年5月3日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1516弄”
}],
Table_border: 1px纯红，//设置表格边框样式
Table _ header _ border: 3px纯绿//设置标题边框样式
}
},
计算值：{
setStyles() {
返回{
--table border :this . table _ border，
-tableHeaderBorder :this . table _ header _ border
}
}
}
}
/脚本
样式lang=scss 。el-table - fit{
border:var(-table border)；
}。El-表格_ _标题-包装器{
border:var(-tableHeaderBorder)；
}
/风格
效果如下：
方法二
对于第二种情况，除了上述方法，我们还可以使用HTML标签上的ref属性来实现，如下：
首先设置样式，一个表格边框样式的JS变量(table_border)和一个表头边框样式的JS变量(table_header_border)。在HTML标记上设置属性ref to tableStyle。然后在methods中定义一个方法setStyles，通过this . refs . table style . refs . table style . refs . table style . El . style . set property将定义的JS变量值手动绑定到对应的css变量上，调用mounted中的setStyles方法。最后，在使用style时，找到需要改变或设置样式的HTML标签的className，绑定css变量。模板
div class=应用程序容器
模板
el表
ref=tableStyle
:data=tableData
El-表格-列
prop=date
标签=日期
宽度=180
/
El-表格-列
prop=name
Label= name
宽度=180
/
El-表格-列
prop=地址
Label=地址
/
/el-table
/模板
/div
/模板
脚本
导出默认值{
data() {
返回{
//表格数据
表数据：[{
日期：“2016年5月2日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1518弄”
}, {
日期：“2016年5月4日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1517弄”
}, {
日期：“2016年5月1日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1519弄”
}, {
日期：“2016年5月3日”，
姓名：“王小虎”，
地址：“上海市普陀区金沙江路1516弄”
}],
Table_border: 1px纯红，//设置表格边框样式
Table _ header _ border: 3px纯绿//设置标题边框样式
}
},
已安装(){
this.setStyles()
},
方法：{
setStyles() {
这个。$nextTick(()={
这个。$ refs . table style . El . style . set property(-table border ，this . table _ border)//为变量赋值
这个。$ refs . table style . El . style . set property(-table header border ，this . table _ header _ border)//为变量赋值
})
}
}
}
/脚本
样式lang=scss 。el-table - fit{
border:var(-table border)；
}。El-表格_ _标题-包装器{
border:var(-tableHeaderBorder)；
}
/风格
效果如下：
总结
个人认为在css中定义css变量来获取JS变量设置样式是很有用的，尤其是自适应的时候，总是需要动态获取一些样式数据进行渲染。
这就是这篇关于在vue中用已定义变量设置css样式的文章。关于在vue中用定义的变量设置css样式的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。