要使用v-bind命令动态绑定内联样式，请使用v-bind :或：style。
在style中直接定义样式
下面的示例直接在v-bind:style属性中定义样式： 例子如下。 html
VUE框架. normal{font-size:18px； 字体权重： bold； }
. active{color:#26b955； }
. under-line { border-bottom : solid 3px red； }
内嵌样式
varvm=newVue({ (
El : ' # APP '，
数据： {
活动颜色： ' red '，
fontSize:16
}
)；
在上面的示例中，v-bind : style=' { color : active color，fontSize: fontSize 'px' } '语句实际上是定义元素字体颜色和字体大小的对象字体的颜色和大小值是从vue对象的data中动态检索的。
style引用vue定义中的数据对象
此示例说明如何在v-bind:style中引用vue对象data中定义的styleObject对象： 代码如下所示。 html
VUE框架. normal{font-size:18px； 字体权重： bold； }
. active{color:#26b955； }
. under-line { border-bottom : solid 3px red； }
通常，直接绑定到样式对象更好
varvm=newVue({ (
El : ' # APP '，
数据： {
样式对象： {
颜色： ' blue '，
fontSize:'12px '
}
}
)；
style在数组中引用多个对象
此示例说明如何在v-bind:style中使用数组形状引用多个对象： 代码如下所示。 html
VUE框架. normal{font-size:18px； 字体权重： bold； }
. active{color:#26b955； }
. under-line { border-bottom : solid 3px red； }
数组语法可以对同一元素应用多个样式对象
varvm=newVue({ (
El : ' # APP '，
数据： {
样式对象： {
颜色： ' blue '，
fontSize:'12px '
(，
样式对象2: {
字体权重： ' bold '，
border : '固态1 px red '
}
}
)；