动态style

:class可以理解为外部样式,行内样式则是:style

对象语法

和:class语法不同的是它的键值对是css样式的属性:值

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

1. 引号的使用
   属性:属性为单个字符可以不用引号,如果是带连字符如font-weight,就要用引号
   值: 除了数字都要加引号
   要避免使用引号可以去掉连字符
2. 改变动态样式的书写位置
   要是加的样式很多时可以将动态样式提取出来,定义在data中:

data:function(){
    return {
        flexStyle: {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            alignItems: 'center',
            flexWrap: 'no-wrap',
        },
    }
}

最后在标签中引入变量即可:

<div :style="flexStyle"></div>

数组语法

:class数组里是类名所以要用"",:style数组里是变量所以不用引号

data() {
  return {
    fontStyle: { color: 'red', fontSize: '33px' },
    boxStyle:{width: '200px', height: '200px', border: `1px solid black`}
  };
},

在标签的动态样式中引入:

<div :style="[fontStyle,boxStyle]">这里是文字</div>

案例参考优课达