vue动态添加style样式

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>

实际效果相同

效果图