Vue入門教程07 Class和Style樣式繫結

2021-09-29 16:04:11 字數 1685 閱讀 3608

1、單樣式使用:

使用 v-bind:class 可以為元素設定乙個樣式:

"hello"

>

class=""

>

<

/div>

<

/div>

<

/template>

export

default}}

<

/script>

.class1

<

/style>樣式效果:

上面程式中,use為true,所以class=class1樣式。

2、疊加樣式使用:

在上面的案例中,我們疊加乙個class2樣式,設定被紅色背景,並使其生效:

"hello"

>

class=""

>

<

/div>

<

/div>

<

/template>

export

default}}

<

/script>

.class1

.class2

<

/style>3、樣式物件的使用:

上述疊加的樣式我們可以還封裝到乙個calssobject物件中,**格式更優美:

"hello"

>

class

="classobject"

>

<

/div>

<

/div>

<

/template>

export

default}}

}<

/script>

.class1

.class2

<

/style>4、樣式陣列語法的使用:

也可以把乙個陣列傳給 v-bind:class :

//v-bind:class中使用陣列格式來引用:

class

="[c1,c2]"

>

<

/div>

//data返回陣列格式的樣式定義:

data()

}使用 v-bind:style 直接設定樣式值:

"hello"

>

"">內嵌入的式樣使用<

/div>

<

/div>

<

/template>

export

default}}

<

/script>與上面v-bind:calss一樣,v-bind-style也可以使用物件、陣列的格式設定style值,下面程式列舉乙個陣列模式的實現:

"hello"

>

"[style1,style2]"

>內嵌入的式樣使用<

/div>

<

/div>

<

/template>

export

default

, style2:}}

}<

/script>end.

ES6入門教程之Class和Module詳解

一 class es6引入了class 類 這個概念,作為物件的模板。通過class關鍵字,可以定義類。定義類 class point tostring var point new point 2,3 point.tostring 2,3 在上面的 片段裡,先是定義了乙個point類,裡面還有乙個c...

SciKit learn快速入門教程和例項(二)

知乎專欄 繼續上次對波士頓房價 的討論,了解模型的屬性和功能。首先導入庫,使用的是線性回歸 from sklearn import datasets from sklearn.linear model import linearregression 匯入波士頓房價資料集 loaded data da...

NumPy 的安裝和入門教程

numpy 是 python 中的乙個處理矩陣運算的模組,它提供了大量矩陣處理的函式,它是由c語言編寫而成,使得矩陣的運算更加方便,處理矩陣執行 速度也更快。以 python3 為例 只需要在終端輸入一行 就可以了,它就會自動安裝最新版本的 numpy,python2 的話把pip3 換成 pip ...