第4章 样式绑定

第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实现封装组件样式透传是Vue3样式系统的核心特性4.2

绑定内联样式:对象语法对象语法v-bind:style绑定JavaScript对象CSS属性名支持驼峰式或短横线分隔数据对象绑定可在data中单独定义样式对象模板更清晰,避免内联冗长通过v-bind:style绑定该对象计算属性绑定复杂样式逻辑可用计算属性返回自动响应依赖数据变化缓存结果,性能更优对象语法看起来像CSS,但实际是JavaScript对象4.2.1对象描述样式4.2.2

数组描述样式使用场景数组语法v-bind:style的数组语法基础样式+覆盖样式组合多个条件样式对象合并将多个样式对象应用到同一元素如v-bind:style="[baseStyles,moreStyles]"后定义的样式可覆盖前面的同名属性分离公共样式与动态样式代码结构更清晰数组语法适合组合多个来源的样式对象4.2.3自动添加前缀

4.2.4多重值自动添加前缀多重值样式Vue3自动侦测需前缀的CSS属性为style属性赋多个带前缀值的数组只渲染最后一个被浏览器支持的值自动添加浏览器引擎前缀如transform自动添加:-webkit-(Chrome/Safari)-moz-(Firefox)、-ms-(IE)如display:[-webkit-box',"-ms-flexbox",'flex]浏览器支持flex则只渲染flex开发者无需手动处理前缀兼容性自动降级4.3实例：实现列表奇偶行不同样式步骤1步骤2步骤3步骤4定义样式:为偶数行定义样式规则v-for循环:使用v-for指令循环输出表格行携带索引参数index奇偶判断:动态绑定:如使用v-bind:class对象语法(index+1)%2===0加1