v-bind 操作 class(对象,数组),v-bind 操作 style

v-bind 操作 class

如果是对象,那么选择布尔值为 true的

如果是数组,那么选择布尔值为 false 的

class 类中,后面的样式会将前面的样式覆盖:

如下,后加的 类big 就会将 类box 样式覆盖,原本box宽高皆是两百,后面加上的 big类宽高是三百,那么最终就是盒子变大为宽高皆是三百的

案例:导航高亮

v-for 动态渲染导航

给链接注册点击事件,将点击到的项的 index赋值给 activeIndex

然后在链接中共动态设置class 对象,布尔值就是 点击到的 index 等于activeIndex

v-bind 对于样式控制的增强 - 操作style

希望通过行内样式覆盖原本的 样式

因为是 js对象,所以其中的值必须是引号引起来,而且这才是符合 css 语法的

如果想要覆盖背景色,在该行内样式对象的键中,键名是不能不支持带 - 的写法

想要支持,两种写法,一是用引号将特殊属性名引起来,一种是 js 中将属性名改为驼峰即可

进度条案例

两个盒子包着

js中行内样式能进行拼接

相关推荐
LiuJun2Son5 分钟前
Angular 快速入门:从零搭建你的第一个应用
前端·javascript·angular.js
小徐_233313 分钟前
Wot UI 2.1.0 发布:ConfigProvider 全局配置能力升级
前端·uni-app
方白羽14 分钟前
Vibe Coding 四个核心阶段
android·前端·app
奶油话梅糖14 分钟前
浏览器解析 HTML 头部的底层逻辑:从字节流到资源调度
前端·html
YHL14 分钟前
🚀从零理解树与二叉树 —— 概念、实现与遍历
前端·javascript·数据结构
小时前端16 分钟前
微前端技术选型深度分析:从概念到实践
前端
wyhwust30 分钟前
基于Apifox的接口管理工具
前端
柒和远方40 分钟前
后端认证、鉴权、高并发:从 Session 到 JWT 再到 Redis
前端·后端·面试
piglet1213841 分钟前
把搜索调到 Claude.ai 的水准
前端·人工智能
前端Hardy1 小时前
前端圈沸腾!这个动画库月下载超 3000 万次,已经快成行业标准了
前端