vue style

作者：金钱打造势力狗。发布日期:2025-03-12 浏览:286

<template>
  <div class="my-component">
    <p>This is a Vue component with scoped styles.</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
.my-component {
  background-color: lightblue;
  padding: 20px;
  border-radius: 8px;
}

.my-component p {
  color: darkblue;
  font-size: 1.2em;
}
</style>

解释说明：

<template>：定义了组件的 HTML 结构。这里有一个 div，类名为 my-component，里面包含一个段落 p。
<script>：定义了组件的逻辑。这里只是简单地声明了组件的名字为 MyComponent。
<style scoped>：定义了组件的样式，并且使用了 scoped 属性。这意味着这些样式只应用于当前组件，不会影响其他组件或全局样式。
- .my-component：设置了背景颜色、内边距和圆角。
- .my-component p：设置了段落的文字颜色和字体大小。

这种方式确保了样式的局部作用域，避免了样式污染其他组件。

上一篇：vue keepalive

下一篇：vue3 validator