Vue3样式引入和使用

Posted 2023-03-23

参考技术A 使用scoped属性，它的css只会应用到当前组件的元素上，只作用到子组件的根结点，支持采用深度选择器，插槽选择器，全局选择器 实现作用域扩展，也支持响应式动态CSS。lang 设置样式语言，默认是css。

转换为：

默认名称 $style

自定义注入名称

绑定内联样式，看起来十分直观，非常像css，CSS property 名可以用camelCase或kebab-case，支持对象语法和数组

实现动态切换class，可以与普通的class属性共存，支持绑定计算属性，三元运算符，支持传递数组给:class

渲染结果：

绑定计算属性

三元运算符