前言
在 UniApp 中，我们经常需要动态修改样式，比如切换日夜间模式、调整字体大小等。这时候我们就需要掌握一些动态修改样式的技巧。本文将介绍几种常用的方法，帮助大家更好地掌控样式变化。
一、使用 Vue 的计算属性
Vue 中的计算属性可以根据依赖变量动态计算出新的属性值，所以我们可以利用它来动态修改样式。
比如，我们可以在 data 中定义一个用于控制日夜间模式的变量 isNight，然后在 computed 中计算出对应的样式：
这样，只要 isNight 变量发生变化，样式就可以自动更新。
二、使用 ref 获取元素
有时候，我们需要直接操作 DOM 元素的样式，这时候可以使用 ref 来获取元素。
这样，我们就可以在 changeStyle 方法中动态修改样式了。
三、利用 JavaScript 设置样式
最直接的方法是利用 JavaScript 设置样式。通过获取元素的样式对象，然后修改对应属性的值即可。
这种方法不需要写额外的样式规则，但需要注意的是，我们要确保修改样式的时机，以免覆盖掉原本的样式规则。
四、全局样式与局部样式
相信你在使用 UniApp 开发项目时，遇到过这样的疑惑：为什么一些样式在 App.vue 中定义后，在其他页面也能生效？
这是因为 App.vue 中的样式是全局样式，会被所有页面共享。如果我们需要定义局部样式，可以在对应页面的样式文件中定义。
比如，我们在 App.vue 中定义一个全局样式：
这个样式会被所有页面共享，如果需要在某个页面中修改样式，可以在该页面的样式文件中定义。
这样，该页面的 body 样式会覆盖全局的 body 样式。
结语
本文介绍了一些常用的动态修改样式的方法，包括使用 Vue 的计算属性、使用 ref 获取元素、利用 JavaScript 设置样式、全局样式与局部样式等。希望对大家在 UniApp 开发中遇到动态修改样式的情况有所帮助。
