今天完成需求时遇到了需要动态修改style样式的场景：
之前采用了三目运算符判断采取不同class样式，使用嵌入式设置style样式
:class="buttonstate === false?'colorNone':'colorFocus'"
如上，在vue中使用：（v-bind）响应式更新class。
但今天出于懒惰的原因，打算用内联直接更改style样式
:style="'width:'+ x * 100 +'%;color:#ffffff;'"
同样使用v-bind，使用单引号引用字段定值，并利用加号+与变量x拼接，不同样式之间使用分号;分割。
在查找解决办法时，也发现了另一种引用方式，通过对象的方式
:style="{'color':txtcolor,'float':'left','margin-top':'-18px','margin-left':'300px'}"
使用v-bind动态绑定style，将style整体通过引号与大括号{}引用，每一个属性值通过引号引用，变量不需要加引号，不同样式之间通过逗号分割。
如果样式不加引号，需要去除margin-top的横线变为marginTop
:style="{color:txtcolor,float:'left',marginTop:'-18px',marginLeft:'300px'}"
由于本次应用样式部分动态部分静态，所以不太方便直接通过三目运算符操作
:style="{color:(index==0?conFontColor:'#000')}"
如果只有单一样式也可以通过最初的方式判断更改。