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

相关推荐
京东云开发者6 分钟前
京东Taro Native框架静态布局直渲提速
前端
程序员小羊!7 分钟前
03JavaScript预备知识
前端
前端的阶梯7 分钟前
Cursor 开发 Python 项目完全指南
前端·人工智能·后端
艾伦野鸽ggg15 分钟前
JavaScript 基础语法速通
前端·javascript
不懂的浪漫17 分钟前
AI 时代还需要买课吗?我用 Skills + Markdown + HTML 搭了一套自学系统
前端·人工智能·html·skill
前端的阶梯20 分钟前
Conda 开发 Python 程序完全指南
前端·人工智能·后端
zhengfei61122 分钟前
第2章 Agent 核心组件深度解析
前端·javascript·react.js
Linsk27 分钟前
前端代码压缩对浏览器兼容性的影响
前端
yingyima31 分钟前
凌晨3点的闹钟:分布式定时任务设计实战
前端
用户814238611884133 分钟前
iOS ObjectC棕地应用集成Expo(React Native)的过程及踩坑
前端