vue中使⽤定义好的变量设置css样式详解⽬录
前⾔
实现
第⼀种情况
第⼆种情况
语法
⽅法⼀
⽅法⼆
总结
前⾔
在做项⽬的时候，通常会遇到需要在 HTML 标签上绑定变量来设置样式，对于这种需求，共有两种情况。实现
第⼀种情况
如果是对于代码中实实在在存在的 HTML 标签，我们可以直接绑定变量来设置样式，⽐如改变表格的边框。
先设置⼀个表格边框样式的 JS 变量（table_border）。
再在 HTML 标签的 style 属性上绑定该 JS 变量。
<template>
<div class="app-container">
<template>
<el-table
:data="tableData"
:
>
<el-table-column
prop="date"
label="⽇期"
width="180"
/>
<el-table-column
prop="name"
label="姓名"
width="180"
/>
<el-table-column
prop="address"
label="地址"
/>
</el-table>
</template>
</div>
</template>
<script>
export default {
data() {
return {
/
/ 表格数据
tableData: [{
date: '2016-05-02',
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1518 弄'
script在html中的用法}, {
date: '2016-05-04',
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王⼩虎',
address: '上海市普陀区⾦沙江路 1516 弄'
}],
table_border: 'border: 1px solid red'// 设置表格边框样式
}
}
}
</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>
<div class="app-container">
<template>
<el-table
:data="tableData"
:
>
<el-table-column
prop="date"
label="⽇期"
width="180"
/>
<el-table-column
prop="name"
label="姓名"
width="180"
/>
<el-table-column
prop="address"
label="地址"
/>
</el-table>
</template>
</div>
</template>
<script>
export default {
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: '1px solid red', // 设置表格边框样式
table_header_border: '3px solid green'// 设置表头边框样式
}
},
computed: {
setStyles() {
return {
'--tableBorder': this.table_border,
'--tableHeaderBorder': this.table_header_border
}
}
}
}
</script>
<style lang="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，该⽅法通过
在 mounted 中调⽤ setStyles ⽅法。
最后在 style 使⽤，到需要改变或者设置样式的 HTML 标签的 className，将 css 变量进⾏绑定即可。
<template>
<div class="app-container">
<template>
<el-table
ref="tableStyle"
:data="tableData"
>
<el-table-column
prop="date"
label="⽇期"
width="180"
/
>
<el-table-column
prop="name"
label="姓名"
width="180"
/>
<el-table-column
prop="address"
label="地址"
/>
</el-table>
</template>
</div>
</template>
<script>
export default {
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: '1px solid red', // 设置表格边框样式
table_header_border: '3px solid green'// 设置表头边框样式
}
},
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>
<style lang="scss">
.el-table--fit{
border: var(--tableBorder);
}
.el-table__header-wrapper{
border: var(--tableHeaderBorder);
}
</style>
效果如下：
总结
对于在 css 中定义 css 变量来获取 JS 变量设置样式，我个⼈感觉挺有⽤的，特别是在做⾃适应的时候，总是需要动态获取⼀些样式数据来进⾏渲染。
到此这篇关于vue中使⽤定义好的变量设置css样式的⽂章就介绍到这了，更多相关vue定义好的变量设置css样式内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

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