今天完成需求時遇到了需要動態修改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')}"
如果只有單一樣式也可以通過最初的方式判斷更改。