Vue中的样式绑定

实例1

我们可以把一个数组传给 v-bind:class:

style 样式

vue代码

实例2

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

<h2 v-bind:class={'类名':值}>hello</h2>

• 可以直接在对象中给类名赋值

• 在vue中操作可以在对象中传入更多属性用来动态切换多个 class
• 操作相同属性时 样式写在后面的样式会覆盖前面的样式 这里因为style样式文字颜色最后设置的为绿色
• 可以通过Vue修改样式属性

       

       

       

Vue代码

实例3

style内联样式

我们可以在 v-bind:style 直接设置样式：

也可以直接绑定到一个样式对象

有相同的效果

实例4

还可以在数组里面使用对象