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

posted @   左扬  阅读(130)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
levels of contents
点击右上角即可分享
微信分享提示