vue style class 繫結官網
// 繫結單個內聯樣式
:style=""
>
view
>
:style=""
>
view
>
:style=""
>
view
>
:style="[
]">
view
>
// 繫結單個class屬性
:class=""
>
view
>
:class=""
>
view
>
:class=""
>
view
>
:class=""
>
view
>
:class
="[activeclass, errorclass]"
>
view
>
:class
="[isactive ? activeclass : '
', errorclass]"
>
view
>
:class
="[, errorclass]"
>
view
>
:class
="cosi==index ? 'select':'unselect'
">
view
>
// 陣列的方式，直接繫結多個 class 屬性
class
="['green', 'font-big','font-bold' ]"
>
<
/view>
// 多條件繫結樣式
='step'
:class
="[item.state=='工作' ? 'online' : '',item.state=='空閒' ? 'idle' : '',item.state=='離線' ? 'offline' : '']"
>
// 繫結多個class屬性
class=""
>
<
/view>
// data 中宣告
:class
="classobject"
data()
}}// 第三種（使用computed屬性）
:class
="classobject"
data()
},computed:
}
:
class
="[isactive,issort]"
data()
}// 陣列與三元運算子結合判斷選擇需要的class
class
="[item.name? 'lg':'sm']"
>
<
/view>
class
="[item.age<18? 'gray':'']"
>
<
/view>
// 陣列物件結合
:class
="[, 'sort']"
// 複雜情況
="title"
:style=
"'filter:grayscale('+(funding>'0'?'100%':'0')+')'" style=
"color:red;"
>
}<
/text>
v bind動態繫結class
物件語法的含義是 class後面跟的是乙個物件。用法一 直接通過 繫結乙個類，用法二 也可以通過判斷，傳入多個值，如 用法三 和普通的類同時存在，並不衝突，如 用法四 如果class內容過於複雜，可以放在乙個methods 方法 或者computed 計算屬性 中，如，注其中classes是乙個計算...
vue系列 class動態繫結
操作元素的 class 列表和內聯樣式是資料繫結的乙個常見需求。因為它們都是屬性，所以我們可以用 v bind 處理它們 只需要通過表示式計算出字串結果即可。不過，字串拼接麻煩且易錯。因此，在將 v bind 用於 class 和 style 時，vue.js 做了專門的增強。表示式結果的型別除了字...
vue動態繫結class的方式
注 以下的 active 和 sort 都是一種類名 物件方法原理 根據冒號後面的結果為true或false來決定是否新增冒號前面的class名 注 這裡的active加不加單引號都可以 class class 或者 class 第一種 用逗號隔開 class 第二種 放在data裡面 class ...