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

相关推荐
wuhen_n几秒前
组件测试策略:测试 Props、事件和插槽
前端·javascript·vue.js
Jiude1 分钟前
Skill + MCP + Linear 自动化工作流:让 AI 包揽变更日志工作
前端·架构·cursor
zhensherlock3 分钟前
Protocol Launcher 系列:Pika 取色器的协议控制(上篇)
前端·javascript·macos·typescript·github·mac·view design
蚂蚁家的砖3 分钟前
基于 Vue 3 + Cesium 的 DJI 无人机航线规划系统技术实践
前端·无人机
inksci5 分钟前
推荐动态群聊二维码制作工具
前端·javascript·微信小程序
wuhen_n5 分钟前
Vue3 单元测试实战:从组合式函数到组件
前端·javascript·vue.js
郑州光合科技余经理2 小时前
海外O2O系统源码剖析:多语言、多货币架构设计与二次开发实践
java·开发语言·前端·小程序·系统架构·uni-app·php
arvin_xiaoting7 小时前
OpenClaw学习总结_I_核心架构_8:SessionPruning详解
前端·chrome·学习·系统架构·ai agent·openclaw·sessionpruning
工程师老罗8 小时前
Image(图像)的用法
java·前端·javascript
swipe9 小时前
把 JavaScript 原型讲透:从 `[[Prototype]]`、`prototype` 到 `constructor` 的完整心智模型
前端·javascript·面试