vue 样式设置扎入组件

在Vue中，可以通过以下几种方式设置样式：

使用内联样式：在组件的模板中使用style属性来设置内联样式，可以直接写入样式对象或者使用计算属性返回样式对象。例如：

<template>
  <div :style="myStyles">This is a component</div>
</template>

<script>
export default {
  data() {
    return {
      myStyles: {
        color: 'red',
        fontSize: '20px'
      }
    }
  }
}
</script>

使用CSS类：在组件的模板中使用class属性来设置CSS类，可以直接写入类名字符串或者使用计算属性返回类名字符串。例如：

<template>
  <div :class="myClass">This is a component</div>
</template>

<script>
export default {
  data() {
    return {
      myClass: 'my-component'
    }
  }
}
</script>

<style>
.my-component {
  color: red;
  font-size: 20px;
}
</style>

使用CSS模块化：在Vue中可以使用CSS模块化来避免全局污染和命名冲突，使用<style module>标签来定义模块化的样式。然后在组件的模板中使用:class="$style.className"来引用样式。例如：

<template>
  <div :class="$style.myComponent">This is a component</div>
</template>

<style module>
.myComponent {
  color: red;
  font-size: 20px;
}
</style>

以上是几种常见的设置样式的方式，根据具体的需求选择合适的方式来设置样式