Event method controls css style changes

In uni-app, you can change the CSS style in the method function in the following ways:

pictures are examples

Finally, change the desired style in the method

1. Use dynamic binding: Use dynamic binding in the template to bind the CSS style with the data, and then modify the data in the method function to change the CSS style. For example, use a similar way to bind the CSS class name in the template <view :class="{ 'active': isActive }"></view>, and then modify the value in the method function isActiveto change the CSS style.

2. Use inline styles: Use inline style binding in templates to bind CSS styles directly to element styleattributes. Then modify the properties of the object in the method function styleto change the CSS style. <view :style="{ color: textColor }"></view>For example, use a similar way to bind inline styles in the template , and then modify textColorthe value in the method function to change the CSS style.

3. Use dynamic class names: Use dynamic class name binding in templates to bind CSS styles to elements through class names. Then modify the class name in the method function to change the CSS style. For example, use a similar way to bind the dynamic class name in the template <view :class="className"></view>, and then modify the value in the method function classNameto change the CSS style.

It should be noted that the above methods change the CSS style by changing the data, so it is necessary to modify the corresponding data in the method function to trigger the update of the CSS style. In addition, the specific implementation method also depends on the front-end framework and component library you use, and can be adjusted according to specific documents and examples.