vue中如何使用定义好的变量设置css样式
导读:本文共3837字符,通常情况下阅读需要13分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 前言在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况。实现第一种情况如果是对于代码中实实在在存在的 HTML 标签,我们可以直接绑定变量来设置样式,比如改变表格的边框。先设置一个表格边框样式的 JS 变量(table_border)。再在 HTML 标签的 style 属性上绑定该 JS 变量。<templa... ...
目录
(为您整理了一些要点),点击可以直达。前言
在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况。
实现
第一种情况
如果是对于代码中实实在在存在的 HTML 标签,我们可以直接绑定变量来设置样式,比如改变表格的边框。
先设置一个表格边框样式的 JS 变量(table_border)。
再在 HTML 标签的 style 属性上绑定该 JS 变量。
<template><divclass="app-container"><template><el-table:data="tableData":><el-table-columnprop="date"label="日期"width="180"/><el-table-columnprop="name"label="姓名"width="180"/><el-table-columnprop="address"label="地址"/></el-table></template></div></template><script>exportdefault{data(){return{//表格数据tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1519弄'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄'}],table_border:'border:1pxsolidred'//设置表格边框样式}}}</script>
效果如下:
第二种情况
如果我想手动改变表格表头的边框颜色,有时候由于一些 UI 框架的组件是封装好的,实际的 HTML 标签代码中并不能直接设置,这时候就需要在 css 中进行设置,那么怎么在 css 中使用变量呢。
语法
首先,我们要搞明白在 css 中如何声明一个 css 变量,如下:
--color:red
如何使用该 css 变量,如下:
.className{color:var(--color)}
方法一
基于以上语法,我们来实现设置表格表头的边框,如下:
先设置样式,一个表格边框样式的 JS 变量(table_border)及一个表头边框样式的 JS 变量(table_header_border)。
再在 computed 中定义一个参数(setStyles),其返回值为 css 样式集。其中键为 css 变量名,值为 css 样式属性值。
将该参数(setStyles)绑定到 HTML 标签的 Style 属性上。
最后在 style 中使用,找到需要改变或者设置样式的 HTML 标签的 className,将 css 变量进行绑定即可。
<template><divclass="app-container"><template><el-table:data="tableData":><el-table-columnprop="date"label="日期"width="180"/><el-table-columnprop="name"label="姓名"width="180"/><el-table-columnprop="address"label="地址"/></el-table></template></div></template><script>exportdefault{data(){return{//表格数据tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1519弄'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄'}],table_border:'1pxsolidred',//设置表格边框样式table_header_border:'3pxsolidgreen'//设置表头边框样式}},computed:{setStyles(){return{'--tableBorder':this.table_border,'--tableHeaderBorder':this.table_header_border}}}}</script><stylelang="scss">.el-table--fit{border:var(--tableBorder);}.el-table__header-wrapper{border:var(--tableHeaderBorder);}</style>
效果如下:
方法二
对于第二种情况,除了以上方法以外,我们还可以在 HTML 标签上使用 ref 属性来实现,如下:
先设置样式,一个表格边框样式的 JS 变量(table_border)及一个表头边框样式的 JS 变量(table_header_border)。
在 HTML 标签上设置属性 ref 为 tableStyle。
再在 methods 中定义一个方法 setStyles,该方法通过 this.refs.tableStyle.refs.tableStyle.refs.tableStyle.el.style.setProperty 来手动将定义好的 JS 变量值绑定到对应的 css 变量上。
在 mounted 中调用setStyles 方法。
最后在 style 使用,找到需要改变或者设置样式的 HTML 标签的 className,将 css 变量进行绑定即可。
<template><divclass="app-container"><template><el-tableref="tableStyle":data="tableData"><el-table-columnprop="date"label="日期"width="180"/><el-table-columnprop="name"label="姓名"width="180"/><el-table-columnprop="address"label="地址"/></el-table></template></div></template><script>exportdefault{data(){return{//表格数据tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1519弄'},{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄'}],table_border:'1pxsolidred',//设置表格边框样式table_header_border:'3pxsolidgreen'//设置表头边框样式}},mounted(){this.setStyles()},methods:{setStyles(){this.$nextTick(()=>{this.$refs.tableStyle.$el.style.setProperty('--tableBorder',this.table_border)//给变量赋值this.$refs.tableStyle.$el.style.setProperty('--tableHeaderBorder',this.table_header_border)//给变量赋值})}}}</script><stylelang="scss">.el-table--fit{border:var(--tableBorder);}.el-table__header-wrapper{border:var(--tableHeaderBorder);}</style>
效果如下:
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
vue中如何使用定义好的变量设置css样式的详细内容,希望对您有所帮助,信息来源于网络。