ylbtech-Vue.js:樣式綁定 |
1.返回頂部 |
Vue.js 樣式綁定
Vue.js class
class 與 style 是 HTML 元素的屬性,用於設置元素的樣式,我們可以用 v-bind 來設置樣式屬性。
Vue.js v-bind 在處理 class 和 style 時, 專門增強了它。表達式的結果類型除了字符串之外,還可以是對象或數組。
class 屬性綁定
我們可以為 v-bind:class 設置一個對象,從而動態的切換 class:
實例 1
實例中將 isActive 設置為 true 顯示了一個綠色的 div 塊,如果設置為 false 則不顯示:
<div v-bind:class="{ active: isActive }"></div>
以上實例 div class 為:
<div class="active"></div>
我們也可以在對象中傳入更多屬性用來動態切換多個 class 。
實例 2
text-danger 類背景顏色覆蓋了 active 類的背景色:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
以上實例 div class 為:
<div class="static active text-danger"></div>
我們也可以直接綁定數據里的一個對象:
實例 3
text-danger 類背景顏色覆蓋了 active 類的背景色:
<div id="app"> <div v-bind:class="classObject"></div> </div>
實例 3 與 實例 2 的渲染結果是一樣的。
此外,我們也可以在這里綁定返回對象的計算屬性。這是一個常用且強大的模式:
實例 4
new Vue({ el: '#app', data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } } })
數組語法
我們可以把一個數組傳給 v-bind:class ,實例如下:
實例 5
<div v-bind:class="[activeClass, errorClass]"></div>
以上實例 div class 為:
<div class="active text-danger"></div>
我們還可以使用三元表達式來切換列表中的 class :
實例 6
errorClass 是始終存在的,isActive 為 true 時添加 activeClass 類:
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
Vue.js style(內聯樣式)
我們可以在 v-bind:style 直接設置樣式:
實例 7
<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div> </div>
以上實例 div style 為:
<div style="color: green; font-size: 30px;">菜鳥教程</div>
也可以直接綁定到一個樣式對象,讓模板更清晰:
實例 8
<div id="app"> <div v-bind:style="styleObject">菜鳥教程</div> </div>
v-bind:style 可以使用數組將多個樣式對象應用到一個元素上:
實例 9
<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">菜鳥教程</div> </div>
注意:當 v-bind:style 使用需要特定前綴的 CSS 屬性時,如 transform ,Vue.js 會自動偵測並添加相應的前綴。
2.返回頂部 |
3.返回頂部 |
4.返回頂部 |
5.返回頂部 |
6.返回頂部 |
![]() |
作者:ylbtech 出處:http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。 |