在第六節的章節中,我們學會了如何給檢視上的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...