在Vue中使用樣式

2022-09-09 12:27:12 字數 721 閱讀 3294

可以通過不同的形式使用css樣式

需要使用v-bind

v-bind和class屬性的結合使用

使用::class="[』』,』』]"

格式:[『css1』,『css2』]

在陣列中填入樣式的名稱

可以使用插值表示式,與data中的資料進行繫結

(在data中定義乙個boolean資料來使用三元表示式true?『css1』:'css2』或物件,或直接將樣式名稱寫入到data中)

使用::class=""

格式

樣式名稱可帶引號也可不帶

(可在data中直接定義乙個物件,直接將物件的名稱填入:class=""中,陣列同理)

v-bind和style屬性的結合使用

使用::style="[css1,css2]"

將data中的資料對應的名稱填入到陣列中即可使用

在data中定義的資料應為物件,物件為原來寫在頁面中的css內聯樣式

使用::style=「data中對應的物件」

先在data中定義乙個物件,物件為原來寫在頁面中的css內聯樣式

僅僅是乙個樣式的話,使用物件即可,如果要分開成多個樣式,就要使用陣列了。

在Vue中使用樣式

一 vue中通過屬性繫結為元素設定class樣式 方式一 直接傳遞乙個陣列,class要用v bind做資料繫結 方式二 三元表示式 方式三 陣列中巢狀物件,提高 的可讀性 方式四 在為 class 使用v bind 繫結物件的時候,物件的屬性是類名,屬性可以帶或者不帶引號都可以 class h2 ...

09 在Vue中使用樣式

在不使用vue時,我們為乙個dom元素新增樣式有兩種方式 如下 charset utf 8 meta vue樣式使用title src script 紅色 red 斜體 italic active style head class red italic 偽類classh1 style color b...

在vue中使用樣式的方法

一 vue屬性繫結 在vue中,是通過v bind 屬性繫結來實現給元素繫結style樣式。其中有兩種方式,一種是通過繫結class類繫結樣式,另一種是通過內聯樣式來實現樣式的繫結。二 繫結class樣式 1.陣列 2.陣列中使用三元表示式 3.陣列中巢狀物件 4.直接使用物件 class clas...