vue中v-bind绑定style属性设置内联样式
vue组件中v-bind可以绑定style属性,设置元素的内联样式。
1.绑定对象
<template>
<div :style="{color: 'red', width: '23px'}">kkfor.com</div>
</template>
<script>
export default {
}
</script>
style中可以绑定对象,设置属性值,渲染后为<div style="color: red; width: 23px;">kkfor.com</div>
注: 当style中绑定的是对象,对象的键值必须是标准命名,当遇到-
的时候,可以转换为驼峰命名,也可以加引号
<template>
<div :style="{fontSize: '16px', 'padding-top': '20px'}">kkfor.com</div>
</template>
<script>
export default {
}
</script>
渲染后为<div style="font-size: 16px; padding-top: 20px;">kkfor.com</div>
绑定data中的对象同样的道理
<template>
<div :style="styles">kkfor.com</div>
</template>
<script>
export default {
data() {
return {
styles: {
color: 'red',
fontSize: '16px',
'padding-top': '20px'
}
}
}
}
</script>
2.绑定数组
<template>
<div :style="styles">kkfor.com</div>
</template>
<script>
export default {
data() {
return {
styles: [
{
color: 'red',
},
{
fontSize: '16px',
'padding-top': '20px'
}
]
}
}
}
</script>
绑定数组时,数组中可以放多个样式的对象,数组中的数据都会被渲染到页面上,渲染后为<div style="color: red; font-size: 16px; padding-top: 20px;">kkfor.com</div>