vue3中style标签内的一些样式使用

/*  
vue3中style标签内的一些样式使用
1、使用变量作为css的属性值
例如：设置元素的字体大小及字体颜色
<script setup>
const data=reactive({
  fontSize:12,
  color:"red"
})
</script>

<style scoped>
.childBox{
  color:v-bind("data.color");
  font-size:v-bind("data.fontSize+'px'");
}
2、书写全局样式
大部分情况组件内的style标签上都会添加scoped属性，使样式私有化
此时如果我们需要给引入的组件或及页面内元素统一添加某种样式时
一般都会选择重新创建一个style标签，其实还可以定义全局规则
例如：要给页面内所有类名为red的元素添加红色的背景颜色，写法如下
<style scoped>
:global(.red) {
  background: red;
}
</style>
*/