Home > Web Front-end > JS Tutorial > body text

Detailed explanation of how to use variables in data in VUE style

coldplay.xixi
Release: 2020-08-13 16:25:21
forward
4118 people have browsed it

Detailed explanation of how to use variables in data in VUE style

When reusing public components in recent projects, the value of the style in CSS needs to be constantly changed for different scenarios, and there is already a global public component style

If you use Vue’s traditional dynamic binding method of class and style to modify the style (mentioned at the end of the article), you need to write a lot of additional variables and module classes. Then if the value of my style can be obtained from the parent component, Passed to the subcomponent, the subcomponent renders the value of the corresponding style based on the passed in value. In fact, it means using the variables in data and props in the style. How to do this?

Related learning recommendations: javascript video tutorial

It’s actually very simple, it only takes three steps, let’s take a look:

1. HTML structure

Copy after login

2. Set "CSS variables" within the scope of the scope