样式
绑定方式
| 绑定方式 | 说明 |
|---|---|
:class | 绑定选择器 |
:style | 绑定 CSS 属性 |
这两种方式对应原生 HTML+CSS 的
class和style属性，只是在此基础上进行增强。
增强效果
:class（传递响应式数据，动态切换类选择器）
| 特性 | 说明 |
|---|---|
| 支持类型 | 基础类型和对象类型 |
| 支持计算属性 | 可以接收计算属性 |
| 支持数组 | 对应 HTML 绑定多个选择器 |
:style（传递响应式数据，动态切换 CSS 属性）
| 特性 | 说明 |
|---|---|
| 直接在 HTML 中使用 | 支持内联 |
| 定义 reactive 对象 | 可以在 <script setup> 中定义 |
| 支持计算属性 | 可以接收计算属性 |
| 支持数组 | 可以接收数组 |
个人看法
其实和原本的CSS写法差不多，只是增强了响应式数据的功能，把原本需要配合js实现的功能简化了