Vue 3基础入门 课件 第4章 样式绑定.pptxVIP

第4章样式绑定

4.1绑定HTML样式字符串语法对象语法数组语法直接绑定静态类名适用于固定样式场景根据条件动态切换类名键为类名,值为布尔表达式组合多个类名或条件对象Vue3会智能合并常规class属性和v-bind:class绑定的类名

4.1.1对象控制样式基本用法多字段切换与普通class共存计算属性绑定通过对象动态切换class属性值对象中可传入多个字段同时动态切换多个样式类复杂逻辑可用计算算属性返回对象v-bind:class可与普通class属性共存两者自动合并,不互相覆盖类名存在与否取取决于对应布尔值保持模板简洁,逻辑集中管理适合需要根据状态频繁切换样式的场景

4.1.2数组控制样式数组语法条件切换将数组传给v-bind:class在元素上应用一个样式列表在元素上应用一个样式列表使用三元表达式切换样式数组中可混合对象语法如[{active:isActive},errorClass]数组中每个元素对应一个类名多条件时对象语法更简洁数组语法适合组合多个来源的类名,对象语法适合条件判断

4.1.3在组件中的应用单根元素组件多根元素组件class属性添加到组件根元素上不会覆盖根元素已有的样式需通过$attrs属性指定接收元素明确指定哪个根元素接收class数据绑定的class同样适用样式自动透传合并避免样式透传歧义配合scopedstyle实现封装组件样式透传