大家好我是Java1234_小锋老师最近更新 《一天学会 Vue3 Vite element-plus UI框架 视频教程》专辑感谢大家支持。本课程主要介绍和讲解 Vue3框架Vite构建工具以及element-plus UI框架。Vue3核心知识介绍Vite构建工具使用以及element-plus UI框架的基础组件配置组件Form 表单组件Data 数据展示组件Navigation导航组件Feedback反馈组件Container布局组件介绍和使用。视频教程课件源码打包下载 链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234具体位置 - 第四阶段富客户端技术里面Vue3专题 - 类与样式绑定Vue 对class和style做了专门增强可以用字符串、对象、数组来动态控制样式数据一变类名和内联样式自动跟着变。适合高亮当前项、按钮禁用态、主题切换、根据状态换颜色等场景。1. 为什么要动态绑定写死的 class / style 改不了界面状态。用响应式数据驱动模板更清晰!-- 不推荐到处拼字符串 -- div :classbox (active ? active : )/div !-- 推荐对象 / 数组语法更直观 -- div :class{ active: isActive, disabled: isDisabled }/div2. 绑定 HTML class2.1 对象语法最常用对象的key 是类名value 为真时才会加上该类script setup /** * class 对象语法 Demo * 根据开关动态添加 / 移除类名 */ import { ref } from vue const isActive ref(true) const hasError ref(false) function toggle() { isActive.value !isActive.value } /script template !-- isActive 为 true 时有 activehasError 为 true 时有 text-danger -- div :class{ active: isActive, text-danger: hasError } 动态 class 示例 /div button clicktoggle切换 active/button button clickhasError !hasError切换错误样式/button /template style .active { font-weight: bold; color: #1677ff; } .text-danger { color: #ff4d4f; } /style运行截图也可以把对象提成变量或计算属性import{reactive,computed}fromvueconstclassObjreactive({active:true,text-danger:false})// 或用 computed依赖变了自动更新constclassObj2computed(()({active:isActive.value!error.value,text-danger:error.value}))div :classclassObj/div2.2 数组语法一次绑定多个类名元素可以是字符串也可以再嵌套对象script setup /** * class 数组语法 Demo */ import { ref } from vue const activeClass ref(active) const errorClass ref(text-danger) const isActive ref(true) /script template !-- 固定两个类 -- div :class[activeClass, errorClass]数组绑定/div !-- 数组里再写对象按条件决定是否加某类 -- div :class[isActive ? activeClass : , { text-danger: true }] 数组 三元 / 对象 /div /template style .active { font-weight: bold; color: #1677ff; } .text-danger { color: #ff4d4f; } /style运行截图2.3 和普通 class 共存静态class和动态:class可以写在一起最终会合并div classbox :class{ active: isActive }/div !-- isActive 为 true 时结果classbox active --3. 绑定内联 style3.1 对象语法:style绑定一个CSS 属性对象可用驼峰或短横线script setup /** * style 对象语法 Demo * 用响应式数据控制颜色和字号 */ import { reactive } from vue const styleObj reactive({ color: #1677ff, fontSize: 20px // 驼峰写法等价于 font-size }) function bigger() { styleObj.fontSize 28px styleObj.color #52c41a } /script template p :stylestyleObj动态内联样式/p button clickbigger变大变绿/button /template运行截图多组 style 对象可以数组合并后面的会覆盖前面的同名属性div :style[baseStyle, overrideStyle]/div3.2 常用小技巧!-- 直接在模板里写对象也可以 -- p :style{ color: activeColor, fontSize: fontSize px }/p !-- 自动加浏览器前缀如 transform -- div :style{ transform: rotate(10deg) }/div4. 入门综合 Demo一个小面板点击切换高亮并改背景色和字号。script setup /** * 类与样式绑定综合 Demo * - class控制是否高亮 * - style控制背景色和字号 */ import { ref, reactive } from vue const isHighlight ref(false) const boxStyle reactive({ backgroundColor: #f5f5f5, fontSize: 16px, padding: 16px, borderRadius: 8px }) /** 切换高亮并同步改样式 */ function toggleHighlight() { isHighlight.value !isHighlight.value if (isHighlight.value) { boxStyle.backgroundColor #e6f4ff boxStyle.fontSize 20px } else { boxStyle.backgroundColor #f5f5f5 boxStyle.fontSize 16px } } /script template div classpanel :class{ highlight: isHighlight } :styleboxStyle 当前状态{{ isHighlight ? 高亮 : 普通 }} /div button clicktoggleHighlight切换高亮/button /template style .panel { border: 1px solid #d9d9d9; margin-bottom: 12px; } .highlight { border-color: #1677ff; font-weight: bold; color: #1677ff; } /style运行效果预期初始灰色背景、普通边框点击按钮加上highlight类背景变浅蓝、字变大变蓝再点一次恢复普通样式运行截图