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

相关推荐
leptune8 小时前
Mac 使用 Microsoft Word 批量将 DOCX 转 PDF(保持原排版)
前端
大龄秃头程序员8 小时前
Flutter 长列表 1 万条滑动卡顿治理:Baseline vs Optimized 可跑 Demo
前端
yingyima8 小时前
Git 核心命令速查:掌握底层原理与实战技巧
前端
黄林晴8 小时前
Kuikly 是什么?和KMP有什么关系?
android·前端
HokKeung8 小时前
Git Hooks 和 Husky 怎么选
前端·前端工程化
李明卫杭州8 小时前
Vue 3 响应式三剑客:ref、shallowRef、reactive,你真的用对了吗?
前端
触底反弹8 小时前
🔥 JavaScript this 指向全解析:面试必考的 5 大绑定规则
前端·javascript·面试
Csvn9 小时前
TypeScript 类型守卫的 4 个实战级别:从 `filter(Boolean)` 到自定义类型谓词
前端
骑士雄师9 小时前
langchain:推荐切片策略
服务器·前端·langchain
sowhat889 小时前
Vue3+vite+Ts+pinia—第八章 生命周期
vue.js