v-bind 是 Vue 3 引入的一个新特性，允许我们在 CSS 中直接绑定 JavaScript 中的动态值。这是 Vue 3 的 CSS 变量注入功能。
/* 在CSS中使用 */
.some-class {
/* 方式1：直接绑定变量 */
color: v-bind(myColor);
/* 方式2：包含字符串拼接 */
width: v-bind('size + "px"');
/* 方式3：使用计算属性 */
height: v-bind(computedHeight);
}
// 在script中定义变量
const myColor = ref('red')
const size = ref(100)
const computedHeight = computed(() => size.value * 2 + 'px')
- v-bind 的优势：
-
实现了 CSS 和 JavaScript 的动态关联
-
可以在 CSS 中使用 JavaScript 变量和表达式
-
响应式更新：当绑定的值变化时，CSS 会自动更新
-
可以进行复杂的计算和字符串拼接
- 使用注意事项：
-
在 v-bind() 中的表达式必须用引号包裹，如：v-bind('myValue + "px"')
-
可以使用 JavaScript 中的任何响应式数据（ref、computed等）
-
表达式中可以进行简单的运算
-
需要添加单位时要手动拼接，如 "rpx"、"px"、"%" 等
