第十一節 動態繫結class和style

2021-08-17 07:41:11 字數 1963 閱讀 7637

在第六節的章節中,我們學會了如何給檢視上的html標籤繫結屬性。

比如,給 標籤繫結href屬性,簡單回憶一下:

複製**

我們用 v-bind 指令(以後都用縮寫的形式)來動態繫結乙個標籤的屬性。

而這一節,我們特意來學習一下樣式的動態繫結,因為它與普通屬性的繫結略有不同,並且在實際開發中,動態繫結樣式是一定會用到的知識,所以,還是值得我們用乙個章節來學習一下它。

老辦法,我們先來準備乙個vue例項:

這是文字

複製**

繫結class
物件語法:我們動態繫結的class的值是乙個物件,具體怎麼寫我們來看看,在上面的**上稍做修改:

這是文字

複製**

我們看到給class繫結的是乙個物件:,isactive是我們vm例項的資料,值為true,這與我們平時看到的class是乙個字串值不一樣,這種寫法,最後會被渲染成什麼樣呢?

我們執行看看渲染後的效果:

咦?class的值最後被渲染成:「active」,原來,在物件中,若該屬性對應的value為true,則該屬性會被渲染出來,為false,則被渲染出來。

我們盡快驗證一下,我們在上面的**上再稍作修改:

'active':isactive,

'danger':isdanger,

'error':iserror

}">這是文字

複製**

我們給class繫結的物件多了2個key和value,我們看看例項的資料data:

data:

複製**

isactive和isdanger的值都為true,iserror都為false,猜一下,渲染出來的結果是什麼?

看效果:

正和我們所**的一樣,值為true的會被成功渲染出來,為false的則不會被渲染出來。這個時候,你就可以根據需要給渲染出來的class編寫樣式了。

一旦vm例項對應的資料發生變化,比如isactive的值由true變成false,檢視上的』active』 類也會被刪除,這樣就會實現動態繫結樣式啦!

除了物件語法來繫結class之外,我們還有另一種寫法。

陣列語法:用陣列語法和物件語法來繫結class,又稍有不同。說了是陣列語法,那寫法就肯定不一樣,我們繼續來看看:

這是文字

複製**

這個時候,class繫結的值就是乙個陣列了,陣列有兩個元素[ activeclass , errorclass ],它們對應的值是vm例項的資料data,我們看看vm的資料data:

data:

複製**

渲染的時候,

activeclass和

errorclass對應的值就會被渲染成class。看效果圖:

效果跟我們預期一樣。這樣,我們就可以修改vm例項的資料data,來實現動態修改class的樣式了。

繫結內聯樣式style
除了使用class類以外,我們還可以在style內聯樣式上下功夫。

繫結內聯樣式也有2種語法,物件語法和陣列語法,但我們這裡只介紹常用的物件語法。

這是文字

複製**

這個時候,我們繫結的就不是class了,是style屬性。它的值是乙個物件:

,同樣,我們來看看vm例項的資料data:

data: 

複製**

原來 colorstyle我們vm例項的資料,值為red。那是不是我們style中的color對應的顏色是就是red呢?

沒錯,看來你已經會舉一反三了。 看渲染效果,我們驗證一樣:

2017-5-9 15:48 上傳

沒毛病,成功渲染成:style=」color:red」。

因此,我們同樣可以修改vm例項的資料data,來實現動態修改檢視央視的效果。

本節小結
採取動態繫結class還是動態內聯樣式style,這個要根據需求分析來具體確定。但較為常用的還是使用繫結class。

第十一節 過載 11

php4中已經有了過載的語法來建立對於外www.cppcns.com部物件模型的對映,就像j a和com那樣.php5帶來了強大的物件導向過載,允許程式設計師建立自定義的行為來訪問屬性和呼叫方法.過載可以通過 get,set,and call幾個特殊方法來進行.當zend引擎試圖訪問乙個成員並沒有找...

第十一節,命名空間namespace

命名空間可以把不同的方法分散到不同的檔案去實現,如果你會objective c,他的作用和裡面的類目有異曲同工之妙。當然了也有很多不同的地方,首先要明白的是,命名空間並不是乙個類,你擴充套件他的方法並不是和類目一樣在擴充套件乙個類的方法。如果你學過net開發,獲取你會對這個命名空間有更好的理解。na...

第十一節std atomic原子操作

互斥量 多執行緒程式設計中保護共享資料 鎖,操作共享資料,開鎖 有兩個執行緒,對乙個變數進行操作,這個執行緒讀,另乙個執行緒往變數中寫值。int atomvalue 5 讀執行緒a int tmpvalue atomvalue atomvalue代表的是多個執行緒之間要共享的變數寫執行緒b atom...