在vue中使用樣式的方法

2022-07-26 14:57:13 字數 675 閱讀 6121

一、vue屬性繫結

在vue中,是通過v-bind 屬性繫結來實現給元素繫結style樣式。

其中有兩種方式,一種是通過繫結class類繫結樣式,另一種是通過內聯樣式來實現樣式的繫結。

二、繫結class樣式

1. 陣列

2. 陣列中使用三元表示式

3. 陣列中巢狀物件

4. 直接使用物件

'

'>class="

classobj

">今天永遠比昨天更好

三、繫結內聯樣式

1. 直接在元素上通過 `:style` 的形式,書寫樣式物件

2. 將樣式物件,定義到 `data` 中,並直接引用到 `:style` 中

+ 在data上定義樣式:

data:

} + 在元素中,通過屬性繫結的形式,將樣式物件應用到元素中:

3. 在 `:style` 中通過陣列,引用多個 `data` 上的樣式物件

+ 在data上定義樣式:

data: ,

h1styleobj2:

} + 在元素中,通過屬性繫結的形式,將樣式物件應用到元素中:

```

在Vue中使用樣式

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

在Vue中使用樣式

可以通過不同的形式使用css樣式 需要使用v bind v bind和class屬性的結合使用 使用 class 格式 css1 css2 在陣列中填入樣式的名稱 可以使用插值表示式,與data中的資料進行繫結 在data中定義乙個boolean資料來使用三元表示式true?css1 css2 或物...

09 在Vue中使用樣式

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