详解.vue文件中style标签的几个标识符

当我们使用 Vue 开发前端项目时，Vue 的单文件组件 .vue 文件中允许我们在 <template> 标签中定义模板、在 <script> 标签中定义 JS 代码、在 <style> 标签中定义 CSS 样式。对于 <style> 标签，Vue 允许我们使用一些特殊的标识符来扩展它们的功能和特性。

下面是对 .vue 文件中 <style> 标签的几个标识符的详解：

scoped

在 .vue 文件中使用 <style scoped> 标签可以给样式添加作用域。作用域的意思是只在当前组件和它的子组件中生效，而不会影响全局样式。

示例：

<template>
  <div class="example">这是一个样式作用域的例子</div>
</template>

<script>
export default {
  name: 'Example'
};
</script>

<style scoped>
.example {
  color: red;
}
</style>

在上面的例子中，.example 样式只会作用于当前的 Example 组件和它的子组件中，而不会影响其他组件。

module

在 .vue 文件中使用 <style module> 标签可以使 CSS 样式模块化。使用模块化的样式可以避免全局样式冲突的问题。

示例：

<template>
  <div class="example">这是样式模块化的例子</div>
</template>

<script>
export default {
  name: 'Example'
};
</script>

<style module>
.example {
  color: red;
}
</style>

在上面的例子中，.example 样式会被自动编译成一个唯一的 class 名称，以避免全局样式冲突的问题。

functional

在 .vue 文件中使用 <style functional> 标签可以让样式块成为一个状态封闭的函数。函数的返回值为 CSS 样式字符串，可以使用 Vue 模板语法等。

示例：

<template>
  <div class="example">这是样式函数的例子</div>
</template>

<script>
export default {
  name: 'Example'
};
</script>

<style functional>
return {
  '.example': {
    color: props.color
  }
}
</style>

在上面的例子中，.example 的样式由一个状态封闭的函数返回，可以动态地根据 props 参数进行渲染。