Vue 框架的 Style 绑定

Style 绑定有三种形式：字符串、数组、对象

字符串形式：

Style 绑定的字符串形式和 Class 绑定的字符串形式一致，都是通过数据代理实现

PS：【:class】是【v-bind:class】的简写

【:style】是【v-bind:style】的简写

Class 绑定的字符串形式：

Style 绑定的字符串形式：

Style 绑定的字符串形式结果如下：

对象形式：

对象形式的语法有点不同，与字符串形式下的相比，在 style 标签里面的语法

从【background-color:red;】

变为【backgroundColor : 'red'】

标签使用的属性值要加单引号，属性名的【-】要去掉且链接在后面的第一个首字母要大写，分号要去掉

效果如下图：

使用数据代理也是可行的

效果如下图：

数组形式：

数组形式更加灵活一点，因为可以添加多个属性

但是在对象形式之上还要添加要求

对象形式的要求：标签使用的属性值要加单引号，属性名的【-】要去掉且链接在后面的第一个首字母要大写，分号要去掉

添加要求：在数组中声明的属性要用 {} 括起来

在如下例子中添加了两个属性

效果如下：

该文章为笔记，教程为动力节点的老杜Vue视频教程，Vue2 Vue3实战精讲
视频链接：https://www.bilibili.com/video/BV17h41137i4?p=1&vd_source=2136c732ce8d5a3f412e2f7064285cb7