前言
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 ref="mydiv">这是一个DIV元素</div>
JavaScript：
<script>
export default {
mounted(){
this.$refs.mydiv.style.backgroundColor = 'red'
}
}
</script>上述代码中，我们在mounted钩子函数中使用this.$refs获取了id为“mydiv”的DOM元素，并修改了该元素的背景颜色。
需要注意的是，$refs只能在mounted函数中使用，因为只有在该函数执行完成后，DOM元素才会被正确地渲染出来。
适合初学的标准三层架构，采用ajax，页面布局div+css符合w3c，用vs自带的sqlserver，免配置sqlserver，使用方便，里面共有5个项目，点击最外层的.sln直接可运行。网站采用asp.net 用户角色配置（membership，UserRoles），用户角色、权限可在asp.net配置里修改，注册，登陆均采用asp.net登陆控件，网站根据用户角色自定义sitemap，基本上
- 使用vue-style-loader
Vue.js提供了一个非常方便的工具vue-style-loader，它可以将样式表动态地插入到DOM中。我们可以使用以下代码安装vue-style-loader：
npm install vue-style-loader --save-dev
使用方法如下：
JavaScript：
<style>
.myclass {
background-color:red;
}
</style>
<script>
import 'vue-style-loader'
export default {
mounted(){
const style = document.createElement('style')
style.innerText = `
.myclass {
background-color: yellow;
}
`
document.head.appendChild(style)
}
}
</script>上述代码中，我们借助了vue-style-loader将样式表动态插入到了DOM中。我们也可以使用JavaScript来动态地修改该样式表中的CSS样式。
- 使用计算属性
在Vue.js中，我们可以通过计算属性来返回CSS样式对象，这样我们就可以在Vue的模板中直接绑定CSS样式，使用起来更加方便。举个例子，如下代码演示了如何使用计算属性来返回CSS样式：
JavaScript：
<script>
export default {
data(){
return {
bgColor: 'red'
}
},
computed:{
myStyle(){
return {
backgroundColor: this.bgColor
}
}
}
}
</script>
<template>
<div :style="myStyle">这是一个DIV元素</div>
</template>上述代码中，我们通过计算属性myStyle返回了一个CSS样式对象，包含了element的backgroundColor属性。
结语
本文中介绍了在Vue.js框架中如何使用JavaScript来修改CSS样式。我们可以通过$refs获取DOM元素并修改其CSS样式，使用vue-style-loader动态插入样式表，或使用计算属性返回CSS样式对象。如果你在开发Vue.js项目时遇到了问题，相信这些技巧可以帮助你解决问题。
