vue动态 style

绑定内联样式的方法同样有两种，对象方式和数组方式。

对象语法

可以联想之前在HTML写的行内样式：

<div style="background:red;"></div>

在Vue中使用动态style的时候是这样来写的：

<div :style="{background:'red','font-weight':700,'font-size':20+'px'}"></div>

但是这样写，不便于阅读，可以将引号里面的对象写在data数据里面。

<div :style="{background:'red','font-weight':700,'font-size':'20px'}">style动态样式</div>

<script>
export default {
   
    name: "app",
    // 数据
    data() {
   
        return {
   
            baseStyle:{
   
                background:'red',
                'font-weight':700,
                'font-size':'20px'
            }
        };
    }
};
</script>

这里需要补充一点的是，当你遇到CSS属性是两个单词的，比如font-size，此时有两种写法，一种是给属性font-size加单引号，例如：

<div :style="{'font-size':'20px'}">多姿多彩</div>

另一种做法就是将属性写成驼峰式命名，Vue会自动翻译成正常的属性，例如：

<div :style="{fontSize:'20px'}">多姿多彩</div>

对应的，移植到data中的时候，也是同样的写法。

数组语法

对象语法是引入一个样式的时候用的，当你想引用多个样式的时候，就要用数组语法。
首先在data中准备两个或者多个样式对象

<script>
export default {
   
    name: "app",
    // 数据
    data() {