VUE中如何在style中调用变量

源码资源网

VUE中如何在style中调用变量
在Vue中，您可以使用CSS变量（Custom Properties）来在style中调用变量。这使得您可以在Vue组件中定义变量，并在样式中重复使用这些变量，实现样式的统一管理和灵活性。以下是在Vue中如何在style中调用变量的示例，中文输出：
1. **在Vue组件中定义变量**：

1. vue
   
2. <template>
   
3.   <div class="example">{{ message }}</div>
   
4. </template>
   
5. <script>
   
6. export default {
   
7.   data() {
   
8.     return {
   
9.       message: 'Hello, Vue!'
   
10.     };
    
11.   }
    
12. };
    
13. </script>
    
14. <style>
    
15. :root {
    
16.   --main-color: #3498db; /* 定义变量 */
    
17. }
    
18. .example {
    
19.   color: var(--main-color); /* 使用变量 */
    
20. }
    
21. </style>

复制代码

在上面的示例中，我们在 `:root` 伪类中定义了一个名为 `--main-color` 的变量，然后在样式中使用 `var(--main-color)` 来调用这个变量，从而设置 `.example` 类的文字颜色为定义的颜色值。
通过使用CSS变量，您可以轻松地在Vue组件的样式中使用变量，并实现样式的灵活管理。