Class 系結
（1）字串方法系結
（2）物件語法
我們可以傳給 v-bind:class 一個物件，以動態地切換 class：
同時，v-bind:class 指令也可以與普通的 class attribute 共存，例如：
系結的資料物件不必行內定義在模板里：
效果和上面的例子一模一樣，
我們也可以在這里系結一個回傳物件的計算屬性：
依舊可以正常運行，
（3）陣列語法：
我們可以把一個陣列傳給 v-bind:class，以應用一個 class 串列：
陣列語法仍然可以與普通的 class attribute 共存，
在陣列語法中也可以使用物件語法：
結果和上面的例子一模一樣，
Style 系結
（1）物件語法
v-bind:style 的物件語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 物件，CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：
直接系結到一個樣式物件通常更好，這會讓模板更清晰：
效果和上面的一樣，
同樣的，物件語法常常結合回傳物件的計算屬性使用，
（2）陣列語法
v-bind:style 的陣列語法可以將多個樣式物件應用到同一個元素上：
（3）多重值
從 2.3.0 起可以為 style 系結中的 property 提供一個包含多個值的陣列，常用于提供多個帶前綴的值，例如：
這樣寫只會渲染陣列中最后一個被瀏覽器支持的值，在本例中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那么就只會渲染 display: flex，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/215018.html
標籤：其他
上一篇：2019年第十屆藍橋杯國賽試題及決議（Java B組） 持續更新中
下一篇：前端必須掌握的知識點