BUI class與style綁定

案例

1. Class 綁定

b-class 綁定支持4種數(shù)據(jù)格式.

• Object : 鍵值為樣式名,值為布爾值
• Array : 值為樣式名, 會(huì)刪除默認(rèn)的class樣式
• Boolean : 鍵值為樣式名,值為布爾值
• String : 值為樣式名

var bs = bui.store({
    scope: "page",
    data: {
        active: true,
        activeClass: "active",
        tabClass: {
            active: true,
            hasActive: true,
        },
        tabClassNames: ["tab","active"],
    }
})

html:

<!-- 1.綁定多個(gè),支持對(duì)象,數(shù)組,數(shù)組不支持動(dòng)態(tài)修改 -->
<p b-class="page.tabClass" class="tab">tabClass是一個(gè)對(duì)象,鍵值為樣式名</p>


<!-- 2.綁定多個(gè),支持?jǐn)?shù)組 -->
<p b-class="page.tabClassNames">tabClassNames是數(shù)組,鍵值為樣式名</p>


<!-- 3.綁定單個(gè),支持布爾值 -->
<p b-class="page.active" class="tab">active 是一個(gè)布爾值</p>


<!-- 4.綁定單個(gè),支持字符串 -->
<p b-class="page.activeClass" class="tab">activeClass 是一個(gè)字符串</p>

2. Style 綁定

b-style 綁定支持2種數(shù)據(jù)格式.當(dāng)綁定的是一個(gè)對(duì)象時(shí), 可以綁定多個(gè), key值為css的鍵值, 比方color,display,background,等. 以下例子, page.styles.color="green" 或 page.color = "red" 都會(huì)觸發(fā)該元素的顏色變更.

• Object : 鍵值為樣式名,值為布爾值
• String : 值為樣式名

var bs = bui.store({
    scope: "page",
    data: {
        styles: {
            color: "red"
        },
        color:"green",
    }
})

html:

<!-- 1.綁定1個(gè)-->
<p b-style="page.color">綁定title屬性,查看源碼才能看到</p>


<!-- 2.綁定多個(gè)-->
<p b-style="page.styles">綁定title屬性,查看源碼才能看到</p>

效果預(yù)覽:

查看效果

3. 顯示與隱藏

案例

b-show 可以根據(jù)數(shù)據(jù)的狀態(tài)來(lái)控制當(dāng)前元素的顯示或者隱藏. b-model 是雙向綁定的內(nèi)容,可以查看表單綁定的章節(jié).

var bs = bui.store({
    scope: "page",
    data: {
        show: true,
    }
})

<!-- 初始化顯示 -->
<p b-show="page.show">我是A,被控制的內(nèi)容</p>


<!-- 初始化隱藏 -->
<p b-show="!page.show">我是B,跟A相反的狀態(tài)</p>


<label><input type="checkbox" b-model="page.show" />點(diǎn)擊可以控制A和B: <span b-text="page.show"></span></label>

效果預(yù)覽:

查看效果