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中行内样式能进行拼接

相关推荐
慧一居士22 分钟前
vite 使用说明和示例演示
前端
牢七31 分钟前
反序列化重点模块 private Object readOrdinaryObject(boolean unshared)废案与反思
java·服务器·前端
NEXT061 小时前
数组转树与树转数组
前端·数据结构·面试
We་ct1 小时前
浏览器 Reflow(重排)与Repaint(重绘)全解析
前端·面试·edge·edge浏览器
笨笨狗吞噬者1 小时前
【uniapp】小程序端解决分包的uni_modules打包后产物进入主包中的问题
前端·微信小程序·uni-app
WebInfra1 小时前
Modern.js 3.0 发布:聚焦 Web 框架,拥抱生态发展
前端·javascript·前端框架
AngelPP1 小时前
OpenClaw Memory 模块完整分析
前端·aigc·ai编程
ID_180079054731 小时前
淘宝商品详情 API 接口 item_get: 高效获取商品数据的技术方案
java·前端·数据库
We་ct1 小时前
LeetCode 637. 二叉树的层平均值:BFS层序遍历实战解析
前端·数据结构·算法·leetcode·typescript·宽度优先
敲敲了个代码1 小时前
浏览器时间管理大师:深度拆解 5 大核心调度 API
前端·javascript·学习·web