Vue Tips and methods course

This article mainly explains the "vue Tips and methods tutorial", the content of the explanation is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn the "vue Tips and methods tutorial"!

I. content introduction

When developing with vue, many components are often encapsulated to facilitate reuse, so it is hard to avoid writing style-related components, such as passing in style parameters such as color and height when you need to use them.

So the question arises: how do we use the parameters received in the component in the style? In other words, how do we use variables in data in our styles?

Second, code demonstration

This usage is really simple, there are no other knowledge points, just go to the code:

Export default {props: {height: {type: Number, default: 54,}, computed: {styleVar () {return {'- box-height': this.height + 'px'},} .box {height: var (--box-height);} .box {height: var (--box-height);}

So we implemented the method of using the js variable in the style in vue:

And define the variable through css, inject the variable in the line, and then use var () in style to get the data we set in the line.

Thank you for your reading, the above is the content of the "vue Tips and methods tutorial". After the study of this article, I believe you have a deeper understanding of the vue Tips and methods tutorial, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!