style绑定
HTML标签中属性style是用来表述css样式的,但有的时候,我们的css样式不是固定的,所以我们不能直接写成普通的字符串,像是下面的例子,就是单纯可以将HTML组件写成固定的css样式。
<div style='height: 500px; width: 500px;'/>
当我们需要进行动态的css样式
绑定时,我们就需要利用v-bind
。
<div :style='Object' />
data:{
Object: {
width: window.innerWidth + 'px',
'background-color': 'red',
fontSize: 30 + 'px'
}
}
像是上面的例子,对于这种background-color较为复合的名字,在js里面是要使用引号‘’来括上,也可以使用fontSize驼峰命名法。