Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use defined variables to set css style in vue. I hope you will get something after reading this article. Let's discuss it together.

Preface

When working on a project, you usually encounter the need to bind variables to the HTML tag to set the style. There are two situations for this requirement.

Achieve the first situation

For HTML tags that actually exist in the code, we can directly bind variables to set the style, such as changing the border of the table.

First set a table border style JS variable (table_border).

Then bind the JS variable on the style attribute of the HTML tag.

Export default {data () {return {/ / tabular data tableData: [{date: '2016-05-02 lane, name:' Wang Xiaohu', address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-04 lane, name:' Wang Xiaohu' Address: '1517 Lane, Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-01 lane, name:' Wang Xiaohu', address: 'Lane 1519 Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-03 lane, name:' Wang Xiaohu' Address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'}], table_border: 'border: 1px solid red'// set table border style}

The effect is as follows:

The second case

If I want to manually change the border color of the table header, sometimes because some UI framework components are encapsulated, the actual HTML tag code can not be set directly, then you need to set it in css, then how to use variables in css.

Grammar

First, we need to figure out how to declare a css variable in css, as follows:

-- color: red

How to use this css variable is as follows:

.className {color: var (--color)} method 1

Based on the above syntax, let's set the border of the table header as follows:

First set the style, a table border style JS variable (table_border) and a table header border style JS variable (table_header_border).

Then define a parameter (setStyles) in computed, whose return value is the css style set. Where the key is the css variable name and the value is the css style attribute value.

Bind this parameter (setStyles) to the Style attribute of the HTML tag.

Finally, in style, find the className of the HTML tag that needs to be changed or styled, and bind the css variable.

Export default {data () {return {/ / tabular data tableData: [{date: '2016-05-02 lane, name:' Wang Xiaohu', address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-04 lane, name:' Wang Xiaohu' Address: '1517 Lane, Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-01 lane, name:' Wang Xiaohu', address: 'Lane 1519 Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-03 lane, name:' Wang Xiaohu' Address: 'lane 1516, Jinshajiang Road, Putuo District, Shanghai'}], table_border: '1px solid red', / / set table border style table_header_border:' 3px solid green'// set header border style}}, computed: {setStyles () {return {'--tableBorder': this.table_border '--tableHeaderBorder': this.table_header_border} .el-table--fit {border: var (--tableBorder) El-table__header-wrapper {border: var (--tableHeaderBorder);}

The effect is as follows:

Method two

For the second case, in addition to the above method, we can also use the ref attribute on the HTML tag, as follows:

First set the style, a table border style JS variable (table_border) and a table header border style JS variable (table_header_border).

Set the property ref to tableStyle on the HTML tag.

Then define a method setStyles in methods, which manually binds the defined JS variable value to the corresponding css variable through this.refs.tableStyle.refs.tableStyle.refs.tableStyle.el.style.setProperty.

Call the setStyles method in mounted.

Finally, in style, find the className of the HTML tag that needs to be changed or styled, and bind the css variable.

Export default {data () {return {/ / tabular data tableData: [{date: '2016-05-02 lane, name:' Wang Xiaohu', address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-04 lane, name:' Wang Xiaohu' Address: '1517 Lane, Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-01 lane, name:' Wang Xiaohu', address: 'Lane 1519 Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-03 lane, name:' Wang Xiaohu' Address: 'lane 1516, Jinshajiang Road, Putuo District, Shanghai'}], table_border: '1px solid red', / / set table border style table_header_border:' 3px solid green'// set header border style}}, mounted () {this.setStyles ()} Methods: {setStyles () {this.$nextTick () = > {this.$refs.tableStyle.$el.style.setProperty ('--tableBorder', this.table_border) / / assign a variable this.$refs.tableStyle.$el.style.setProperty ('--tableHeaderBorder', this.table_header_border) / / assign a value to a variable}} .el-table--fit {border: var (--tableBorder) El-table__header-wrapper {border: var (--tableHeaderBorder);}

The effect is as follows:

After reading this article, I believe you have a certain understanding of "how to use defined variables to set css style in vue". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.