前言
Vue.js是一个流行的JavaScript框架，其轻量级的MVVM框架和诸多的工具使它成为了前端工程师们的首选。在Vue.js框架中，我们经常需要在JavaScript代码中修改CSS样式。这也是本文讨论的主题。
Vue中使用JS修改CSS
在Vue.js中，我们可以很方便地绑定CSS样式，实现样式的动态变化。但在某些场景下，我们可能需要通过JavaScript代码来修改CSS样式。这时，我们就需要使用Vue.js提供的一些工具和方法。
- 通过$refs获取元素
在Vue.js中，我们可以使用$refs来获取DOM元素，并通过JavaScript来修改元素的CSS样式。举个例子，如下代码演示了如何通过$refs获取DOM元素，并修改该元素的背景颜色：
立即学习“前端免费学习笔记（深入）”；
HTML：
这是一个DIV元素
JavaScript：
上述代码中，我们在mounted钩子函数中使用this.$refs获取了id为“mydiv”的DOM元素，并修改了该元素的背景颜色。
需要注意的是，$refs只能在mounted函数中使用，因为只有在该函数执行完成后，DOM元素才会被正确地渲染出来。
- 使用vue-style-loader
Vue.js提供了一个非常方便的工具vue-style-loader，它可以将样式表动态地插入到DOM中。我们可以使用以下代码安装vue-style-loader：
适合初学的标准三层架构，采用ajax，页面布局div+css符合w3c，用vs自带的sqlserver，免配置sqlserver，使用方便，里面共有5个项目，点击最外层的.sln直接可运行。网站采用asp.net 用户角色配置（membership，UserRoles），用户角色、权限可在asp.net配置里修改，注册，登陆均采用asp.net登陆控件，网站根据用户角色自定义sitemap，基本上
npm install vue-style-loader --save-dev
使用方法如下：
JavaScript：
上述代码中，我们借助了vue-style-loader将样式表动态插入到了DOM中。我们也可以使用JavaScript来动态地修改该样式表中的CSS样式。
- 使用计算属性
在Vue.js中，我们可以通过计算属性来返回CSS样式对象，这样我们就可以在Vue的模板中直接绑定CSS样式，使用起来更加方便。举个例子，如下代码演示了如何使用计算属性来返回CSS样式：
JavaScript：
这是一个DIV元素
上述代码中，我们通过计算属性myStyle返回了一个CSS样式对象，包含了element的backgroundColor属性。
结语
本文中介绍了在Vue.js框架中如何使用JavaScript来修改CSS样式。我们可以通过$refs获取DOM元素并修改其CSS样式，使用vue-style-loader动态插入样式表，或使用计算属性返回CSS样式对象。如果你在开发Vue.js项目时遇到了问题，相信这些技巧可以帮助你解决问题。
