style中带有‘-’属性名都要变成驼峰式，比如z-index要变成zIndex
1. 数组方式
<template>
<div :style="[style1, style2]"></div>
</template>
<script>
export default {
data(){
return{
style1:{
height:'50px',
width:'50px'
},
style2:{
border:'1px solid'
}
}
}
}
</script>
实际效果如下所示：
效果图
2. 对象方式
- 直接赋值
<div :style="{ height:'50px', width:'50px',border:'1px solid'}"></div>
实际效果相同
效果图
- 绑定变量对象
<template>
<div id="app">
<div :style="style"></div>
</div>
</template>
<script>
export default {
data(){
return{
style:{
height:'50px',
width:'50px',
border:'1px solid'
}
}
}
}
</script>
实际效果相同
效果图
