vue 自學筆記(4): 樣式綁定與條件渲染

一:對象綁定

　　

Vue 對於頁面的樣式加載也有獨特的方式，按照 Vue 提供的方式，咱們能夠輕鬆的控制它們的呈現。

假使咱們要實現點擊 div 變色

Vue 提供的樣式方案的本質是對元素節點進行屬性的綁定，由此咱們能夠獲知它會採用v-bind指令去綁定屬性，同時咱們也能知道樣式內容的定義也能夠放在 data 中，如下是幾個綁定樣式的方案。

 

 

　　　　一:對象綁定   class

　　　　咱們在 div 上綁定的屬性是對象方式呈現的

 

　　

　　　　

　　　　1:　　經過指令，給元素的 class 綁定了一個對象，這個對象的屬性名在樣式中這樣寫 ,style

　　　　

　　　　　2:　那麼給 class 綁定的對象起到了關鍵的做用，若是isActived的值爲真，actvated就會生效，爲假，就會失效。那麼要實現點擊 div 變色，就能夠給其綁定一個方法，去控制isActived的轉換，天然而然就實現了點擊變色。

　　　　

 

　　　　　二:數組綁定

　　　　　　咱們在 div 的 class 上綁定的屬性是以數組呈現的，咱們能夠將兩個不一樣顏色的樣式類寫在裏面，去控制它的綁定

　

 

　　　　這個時候，樣式中能夠寫兩個不一樣顏色的樣式,在style中

　　　　　　

　　　　在 methods 中定義方法，實現 class 屬性的切換，每點擊一下 div，就將數組中的一個屬性名的值與樣式表中的內容對應，另外一個置爲空。

　　　　　　三元運算

　　　　　　

　　　　　　

　　　　三:直接進行屬性綁定   style 屬性修改

　　　　　　把樣式內容寫在 data 中，而後直接綁定在元素的 class 屬性上，這實際上是數組綁定方法的修改。咱們發現，其實數組綁定的實質就是在數組中的屬性名，都會綁定，只是以前咱們把其中一個置爲空而已，例以下面的例子，我還經過在數組中添加了一個屬性，修改了字體。

 　　　　

　　　　　　如今咱們只須要經過點擊事件，將 styleObj 中的內容修改就完成了點擊變色。

　　　　　

　　　　

 　　　　四:　　指令 v-if  和v-show

　　　　　　　　1  :指令 v-if  和v-show 的區別

　　　　　　v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。所以，咱們能夠經過它輕鬆容易的控制頁面某些元素的呈現。你可能也會想到編程中經常使用的if與else，Vue 也提供了 v-else 和 v-else-if 與它搭配使用。

　　　　

　　　　　　

　　　　　　若是在 data 中定義的 show 屬性的值爲真的話，那麼會顯示的 div 會是第一行，反之就是第二行。

　　　　　　若是搭配上 v-else-if，就能夠實現更加特殊的效果，假設 data 中的 ifandelse: 'a'

　　　　　　　　

　　　　　　　　2: 與 v-if 相似的 v-show

　　　　　　另外一個用於根據條件展現元素的選項是 v-show 指令。用法大體同樣：

　　　　　　　　

　　　　　　　　區別!!!!!!

　　　　　　　　　　　　它們兩最大的不一樣就在於其採起不一樣的渲染方式，若是採用 v-if 的用法，不顯示的元素會採用十分極端的不渲染的方式來達到不顯示的表現。而 v-show 較爲柔和，若是不讓其顯示，它只會將display: block變爲none，它自己仍是會渲染的

　　　　　　　　注意:!!!!