vuejs3.0 从入门到精通——Vue语法——Class 与 Style 绑定(绑定内联样式)
Class 与 Style 绑定(绑定内联样式)
一、绑定对象
:style
支持绑定 JavaScript 对象值,对应的是HTML 元素的style
属性:
template:
1 2 | const activeColor = ref( 'red' ) const fontSize = ref(30) |
template:
1 | <div :style= "{ color: activeColor, fontSize: fontSize + 'px' }" ></div> |
尽管推荐使用 camelCase,但:style
也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称),例如:
template:
1 | <div :style= "{ 'font-size': fontSize + 'px' }" ></div> |
直接绑定一个样式对象通常是一个好主意,这样可以使模板更加简洁:
js:
1 2 3 4 | const styleObject = reactive({ color: 'red' , fontSize: '13px' }) |
template:
1 | <div :style= "styleObject" ></div> |
同样的,如果样式对象需要更复杂的逻辑,也可以使用返回样式对象的计算属性。
二、绑定数组
我们还可以给:style
绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上:
1 | <div :style= "[baseStyles, overridingStyles]" ></div> |
三、自动前缀
当你在:style
中使用了需要浏览器特殊前缀的 CSS 属性时,Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性,那么将尝试加上各个浏览器特殊前缀,以找到哪一个是被支持的。
四、样式多值
你可以对一个样式属性提供多个 (不同前缀的) 值,举例来说:
1 | <div :style= "{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" ></div> |
数组仅会渲染浏览器支持的最后一个值。在这个示例中,在支持不需要特别前缀的浏览器中都会渲染为display: flex
。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性