HTML中为元素绑定Class属性与Style样式

作者：码上未来CodingFuture 来源：码上未来CodingFuture 2023/4/11 15:19:59

在实际开发中经常会遇到动态操作元素样式的需求。因此，vue ...

在实际开发中经常会遇到动态操作元素样式的需求。因此，vue 允许开发者通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式。 1. 动态绑定 HTML 的 class 可以通过三元表达式，动态的为元素绑定 class 的类名。示例代码如下： <h3 class : class >MyDeep组件</h3> >Toggle Italic</button> return true // 字体变细 font-weight: 200 ; // 倾斜字体 font-style: italic; 2. 以数组语法绑定 HTML 的 class 如果元素需要动态绑定多个 class 的类名，此时可以使用数组的语法格式： <h3 class thin MyDeep 组件 </h3> <button >Toggle Italic</button> <button >Toggle Delete</button> data return isItalic: true isDelete: false 3. 以对象语法绑定 HTML 的 class 使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化： <h3 class thin class class0bj MyDeep 组件</h3> Toggle Italic </button> Toggle Delete </button> data return //对象中，属性名是class 类名，值是布尔值 italic: true delete : false 4. 以对象语法绑定内联的 style :style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： > 码上未来 </div> <button 1 </button> <button >字号 - 1 </button> data return active: 'red' fsize: 30 bgcolor: 'pink' 码上未来IT实训课程优势 01 课程内容牛 ●Java、Web、Python、互联网全栈开发等开发课程，每年迭代课程内容 ●真实企业资源，学习更深入 02 专家技术牛 ●技术大咖根据课程体系分重点、分阶段授课 ●5年以上企业一线开发经验项目经理、技术大牛实战授课 03 实训案例牛 ●真实的企业一线产品需求案例 ●全部来自一线的项目经理，带来真实需求一线项目 04 学习模式牛 ●6个月全日制实训学习，真实的项目经验 ●讲练结合，掌握更熟练，全程技术老师跟踪辅导 05 就业服务牛 ●毕业即就业，学员就业 ●保薪资就业协议入学即签订 ●毕业学生享受技术大咖终身支持指导课程适用人群 ●大学应往届生学习进修、在职提升、转行充电人群； ●会基本的电脑操作，打字、有无编程基础均可； ●对互联网编程感兴趣，想往网站开发、软件工程、大数据方向发展的人群； ●低学历人群经过入学测试后方可选修。