class 與 style 是 html 元素的屬性,用於設定元素的樣式,我們可以用 v-bind 來設定樣式屬性。
vue.js v-bind 在處理 class 和 style 時, 專門增強了它。表示式的結果型別除了字串之外,還可以是物件或陣列。
class 屬性繫結
我們可以為 v-bind:class 設定乙個物件,從而動態的切換 class:
例項 1
例項中將 isactive 設定為 true 顯示了乙個綠色的 div 塊,如果設定為 false 則不顯示:
嘗試一下 »
以上例項 div class 為:
我們也可以在物件中傳入更多屬性用來動態切換多個 class 。
例項 2
text-danger 類背景顏色覆蓋了 active 類的背景色:
v-bind:class="">
嘗試一下 »
以上例項 div class 為:
我們也可以直接繫結資料裡的乙個物件:
例項 3
text-danger 類背景顏色覆蓋了 active 類的背景色:
嘗試一下 »
例項 3 與 例項 2 的渲染結果是一樣的。
此外,我們也可以在這裡繫結返回物件的計算屬性。這是乙個常用且強大的模式:
例項 4
new vue({
data: {
isactive: true,
error: {
value: true,
type: 'fatal'
computed: {
classobject: function () {
return {
base: true,
active: this.isactive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
嘗試一下 »
陣列語法
我們可以把乙個陣列傳給 v-bind:class ,例項如下:
例項 5
嘗試一下 »
以上例項 div class 為:
我們還可以使用三元表示式來切換列表中的 class :
例項 6
errorclass 是始終存在的,isactive 為 true 時新增 activeclass 類:
嘗試一下 »
vue.js style(內聯樣式)
我們可以在 v-bind:style 直接設定樣式:
例項 7
菜鳥教程
嘗試一下 »
以上例項 div style 為:
菜鳥教程
也可以直接繫結到乙個樣式物件,讓模板更清晰:
例項 8
菜鳥教程
嘗試一下 »
v-bind:style 可以使用陣列將多個樣式物件應用到乙個元素上:
例項 9
菜鳥教程
嘗試一下 »
注意:當 v-bind:style 使用需要特定字首的 css 屬性時,如 transform ,vue.js 會自動偵測並新增相應的字首
大三學習進度67
sort 方法可以指定公升序或降序排序。sort 方法第乙個引數為要排序的字段,第二個字段指定排序規則,1為公升序,1為降序,預設為公升序。對欄位 alexa 按公升序排序 usr bin python3importpymongomyclient pymongo.mongoclient mongod...
大三學習進度50
建造者模式 builder pattern 使用多個簡單的物件一步一步構建成乙個複雜的物件。這種型別的設計模式屬於建立型模式,它提供了一種建立物件的最佳方式。乙個 builder 類會一步一步構造最終的物件。該 builder 類是獨立於其他物件的。意圖 將乙個複雜的構建與其表示相分離,使得同樣的構...
大三學習進度45
spring 的事務管理是基於 aop 實現的,而 aop 是以方法為單位的。spring 的事務屬性分別為傳播行為 隔離級別 唯讀和超時屬性,這些屬性提供了事務應用的方法和描述策略。在 j a ee 開發經常採用的分層模式中,spring 的事務處理位於業務邏輯層,它提供了針對事務的解決方案。在 ...