vue 修改style样式

要修改Vue组件的样式，可以使用以下几种方法：

使用内联样式：在Vue组件的template中使用style属性来添加内联样式。例如：

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
    This is a Vue component with inline styles
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

在上面的例子中，通过data属性定义了textColor和fontSize两个变量，然后在template中使用:style来绑定这两个变量，实现动态的样式修改。

使用CSS类：在Vue组件中使用class属性来绑定一个或多个CSS类。例如：

<template>
  <div :class="{ 'red-text': isRedText, 'big-font': isBigFont }">
    This is a Vue component with CSS classes
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRedText: true,
      isBigFont: false
    }
  }
}
</script>

<style>
.red-text {
  color: red;
}

.big-font {
  font-size: 20px;
}
</style>

在上面的例子中，通过data属性定义了isRedText和isBigFont两个变量，然后在template中使用:class来绑定这两个变量，实现动态的样式修改。同时，在style标签中定义了.red-text和.big-font两个CSS类的样式。

使用全局样式：在Vue的根组件中引入全局样式，然后在各个子组件中使用。例如：

<!-- main.js -->
import Vue from 'vue'
import App from './App.vue'
import './styles/global.css'

new Vue({
  render: h => h(App),
}).$mount('#app')

<!-- App.vue -->
<template>
  <div class="app">
    This is a Vue component with global styles
  </div>
</template>

<!-- styles/global.css -->
.app {
  color: blue;
  font-size: 18px;
}

在上面的例子中，通过在main.js中引入全局样式文件global.css，然后在App.vue组件中使用.app类来应用全局样式。

请注意，以上方法只是一些常见的方式，实际使用中可以根据具体需求选择合适的方法来修改Vue组件的样式